Adding ng-bootstrap to Angular template breaks AoT build

[ghost]

Using the Angular template provided with VS 2017 Preview 2, I cannot get an AoT build to work after adding ng-bootstrap (and Bootstrap 4) to the project. I've created a sample repo that illustrates the problem: https://github.com/alienlike/NgBootstrapAoT. The first two commits are generated by Visual Studio and represent the unmodified template; my changes are in the third commit.

$ webpack --env.prod
Hash: b72fad9933e3fdfcd9795b2ec44ae44a4f2c21e1
Version: webpack 2.5.1
Child
    Hash: b72fad9933e3fdfcd979
    Time: 15657ms
             Asset    Size  Chunks                    Chunk Names
    main-client.js  600 kB       0  [emitted]  [big]  main-client

    ERROR in ./$$_gendir/~/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.ts
    Module parse failed: D:\Projects\NgBootstrapAoT\NgBootstrapAoT\$$_gendir\node_modules\@ng-bootstrap\ng-bootstrap\alert\alert.ngfactory.ts Unexpected token (13:21)
    You may need an appropriate loader to handle this file type.
    | import * as i2 from '@ng-bootstrap/ng-bootstrap/alert/alert';
    | import * as i3 from '@ng-bootstrap/ng-bootstrap/alert/alert-config';
    | const styles_NgbAlert:any[] = ([] as any[]);
    | export const RenderType_NgbAlert:i0.RendererType2 = i0.ɵcrt({encapsulation:2,styles:styles_NgbAlert,
    |     data:{}});
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 10:0-103
     @ ./ClientApp/boot.browser.ts

    ERROR in ./$$_gendir/~/@ng-bootstrap/ng-bootstrap/tooltip/tooltip.ngfactory.ts
    Module parse failed: D:\Projects\NgBootstrapAoT\NgBootstrapAoT\$$_gendir\node_modules\@ng-bootstrap\ng-bootstrap\tooltip\tooltip.ngfactory.ts Unexpected token (11:29)
    You may need an appropriate loader to handle this file type.
    | import * as i0 from '@angular/core';
    | import * as i1 from '@ng-bootstrap/ng-bootstrap/tooltip/tooltip';
    | const styles_NgbTooltipWindow:any[] = ['.bs-tooltip-top[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-tooltip-bottom[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      left: 50%;\n    }\n\n    .bs-tooltip-left[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-tooltip-right[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      top: 50%;\n    }'];
    | export const RenderType_NgbTooltipWindow:i0.RendererType2 = i0.ɵcrt({encapsulation:0,
    |     styles:styles_NgbTooltipWindow,data:{}});
     @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 11:0-107
     @ ./ClientApp/boot.browser.ts
 
 etc.

I opened an issue with the ng-bootstrap project, but their position is that the ng-bootstrap project is widely and successfully used with AoT.

[SteveSandersonMS]

Please see here for this fix: #1168 (comment)

The issue is already resolved in the dev branch here in this repo, but that won't be shipped until the next .NET Core SDK release.