Adding ng-bootstrap to Angular template breaks AoT build #474

New Issue

fergalmoran · 2025-08-09T17:16:25Z

fergalmoran commented

2025-08-09 17:16:25 +00:00

Originally created by @ghost on 8/24/2017

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.

*Originally created by @ghost on 8/24/2017* 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.

fergalmoran closed this issue

2025-08-09 17:16:25 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#474