Ngx-bootstrap: aspnet-prerendering and ngx-bootstrap

Created on 21 Sep 2017  路  4Comments  路  Source: valor-software/ngx-bootstrap

Hey!

Have problem with prod build with AOT.

      ERROR in ./$$_gendir/~/ngx-bootstrap/alert/alert.component.ngfactory.ts
      Module parse failed: d:\project\dir\alert\alert.component.ngfactory.ts Unexpected token (13:27)
      You may need an appropriate loader to handle this file type.
      | import * as i2 from 'ngx-bootstrap/alert/alert.component';
      | import * as i3 from 'ngx-bootstrap/alert/alert.config';
      | const styles_AlertComponent:any[] = ([] as any[]);
      | export const RenderType_AlertComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_AlertComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 10:0-100
       @ ./ClientApp/boot.browser.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/datepicker/datepicker.component.ngfactory.ts
      Module parse failed: d:\project\dir\datepicker\datepicker.component.ngfactory.ts Unexpected token (21:32)
      You may need an appropriate loader to handle this file type.
      | import * as i10 from '@angular/forms';
      | import * as i11 from 'ngx-bootstrap/datepicker/datepicker.config';
      | const styles_DatePickerComponent:any[] = ([] as any[]);
      | export const RenderType_DatePickerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_DatePickerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 11:0-110
       @ ./ClientApp/boot.browser.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/dropdown/bs-dropdown-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\dropdown\bs-dropdown-container.component.ngfactory.ts Unexpected token (12:41)
      You may need an appropriate loader to handle this file type.
      | import * as i1 from 'ngx-bootstrap/dropdown/bs-dropdown-container.component';
      | import * as i2 from 'ngx-bootstrap/dropdown/bs-dropdown.state';
      | const styles_BsDropdownContainerComponent:any[] = ([] as any[]);
      | export const RenderType_BsDropdownContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_BsDropdownContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 12:0-119
       @ ./ClientApp/boot.browser.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/modal/modal-backdrop.component.ngfactory.ts
      Module parse failed: d:\project\dir\modal\modal-backdrop.component.ngfactory.ts Unexpected token (11:35)
      You may need an appropriate loader to handle this file type.
      | import * as i0 from '@angular/core';
      | import * as i1 from 'ngx-bootstrap/modal/modal-backdrop.component';
      | const styles_ModalBackdropComponent:any[] = ([] as any[]);
      | export const RenderType_ModalBackdropComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_ModalBackdropComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 13:0-109
       @ ./ClientApp/boot.browser.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/modal/modal-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\modal\modal-container.component.ngfactory.ts Unexpected token (13:36)
      You may need an appropriate loader to handle this file type.
      | import * as i2 from 'ngx-bootstrap/modal/modal-options.class';
      | import * as i3 from 'ngx-bootstrap/modal/bs-modal.service';
      | const styles_ModalContainerComponent:any[] = ([] as any[]);
      | export const RenderType_ModalContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_ModalContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 14:0-110
       @ ./ClientApp/boot.browser.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/popover/popover-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\popover\popover-container.component.ngfactory.ts Unexpected token (13:38)
      You may need an appropriate loader to handle this file type.
      | import * as i2 from 'ngx-bootstrap/popover/popover-container.component';
      | import * as i3 from 'ngx-bootstrap/popover/popover.config';
      | const styles_PopoverContainerComponent:any[] = ['.bs-popover-top[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-popover-bottom[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      left: calc
(50% - 5px);\n    }\n    .bs-popover-left[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-popover-right[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      top: calc(50% - 2.5px);\n    }'];
      | export const RenderType_PopoverContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:0,
      |     styles:styles_PopoverContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 15:0-114
       @ ./ClientApp/boot.browser.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/tooltip/tooltip-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\tooltip\tooltip-container.component.ngfactory.ts Unexpected token (12:38)
      You may need an appropriate loader to handle this file type.
      | import * as i1 from 'ngx-bootstrap/tooltip/tooltip-container.component';
      | import * as i2 from 'ngx-bootstrap/tooltip/tooltip.config';
      | const styles_TooltipContainerComponent:any[] = ['.tooltip[_nghost-%COMP%] {\n      display: block;\n    }\n    .bs-tooltip-top[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-tooltip-bottom[_
nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      left: calc(50% - 2.5px);\n    }\n    .bs-tooltip-left[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-tooltip-right[_nghost-%COMP%]   .arrow[_ngcon
tent-%COMP%] {\n      top: calc(50% - 2.5px);\n    }'];
      | export const RenderType_TooltipContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:0,
      |     styles:styles_TooltipContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 16:0-114
       @ ./ClientApp/boot.browser.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/typeahead/typeahead-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\typeahead\typeahead-container.component.ngfactory.ts Unexpected token (12:40)
      You may need an appropriate loader to handle this file type.
      | import * as i1 from '@angular/common';
      | import * as i2 from 'ngx-bootstrap/typeahead/typeahead-container.component';
      | const styles_TypeaheadContainerComponent:any[] = ([] as any[]);
      | export const RenderType_TypeaheadContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_TypeaheadContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts 17:0-119
       @ ./ClientApp/boot.browser.ts
  Child
      Hash: 15f00c6a21818a263f84
      Time: 28447ms
               Asset     Size  Chunks                    Chunk Names
      main-server.js  6.52 MB       0  [emitted]  [big]  main-server

      ERROR in ./$$_gendir/~/ngx-bootstrap/alert/alert.component.ngfactory.ts
      Module parse failed: d:\project\dir\alert\alert.component.ngfactory.ts Unexpected token (13:27)
      You may need an appropriate loader to handle this file type.
      | import * as i2 from 'ngx-bootstrap/alert/alert.component';
      | import * as i3 from 'ngx-bootstrap/alert/alert.config';
      | const styles_AlertComponent:any[] = ([] as any[]);
      | export const RenderType_AlertComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_AlertComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 10:0-100
       @ ./ClientApp/boot.server.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/datepicker/datepicker.component.ngfactory.ts
      Module parse failed: d:\project\dir\datepicker\datepicker.component.ngfactory.ts Unexpected token (21:32)
      You may need an appropriate loader to handle this file type.
      | import * as i10 from '@angular/forms';
      | import * as i11 from 'ngx-bootstrap/datepicker/datepicker.config';
      | const styles_DatePickerComponent:any[] = ([] as any[]);
      | export const RenderType_DatePickerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_DatePickerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 11:0-110
       @ ./ClientApp/boot.server.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/dropdown/bs-dropdown-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\dropdown\bs-dropdown-container.component.ngfactory.ts Unexpected token (12:41)
      You may need an appropriate loader to handle this file type.
      | import * as i1 from 'ngx-bootstrap/dropdown/bs-dropdown-container.component';
      | import * as i2 from 'ngx-bootstrap/dropdown/bs-dropdown.state';
      | const styles_BsDropdownContainerComponent:any[] = ([] as any[]);
      | export const RenderType_BsDropdownContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_BsDropdownContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 12:0-119
       @ ./ClientApp/boot.server.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/modal/modal-backdrop.component.ngfactory.ts
      Module parse failed: d:\project\dir\modal\modal-backdrop.component.ngfactory.ts Unexpected token (11:35)
      You may need an appropriate loader to handle this file type.
      | import * as i0 from '@angular/core';
      | import * as i1 from 'ngx-bootstrap/modal/modal-backdrop.component';
      | const styles_ModalBackdropComponent:any[] = ([] as any[]);
      | export const RenderType_ModalBackdropComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_ModalBackdropComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 13:0-109
       @ ./ClientApp/boot.server.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/modal/modal-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\modal\modal-container.component.ngfactory.ts Unexpected token (13:36)
      You may need an appropriate loader to handle this file type.
      | import * as i2 from 'ngx-bootstrap/modal/modal-options.class';
      | import * as i3 from 'ngx-bootstrap/modal/bs-modal.service';
      | const styles_ModalContainerComponent:any[] = ([] as any[]);
      | export const RenderType_ModalContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_ModalContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 14:0-110
       @ ./ClientApp/boot.server.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/popover/popover-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\popover\popover-container.component.ngfactory.ts Unexpected token (13:38)
      You may need an appropriate loader to handle this file type.
      | import * as i2 from 'ngx-bootstrap/popover/popover-container.component';
      | import * as i3 from 'ngx-bootstrap/popover/popover.config';
      | const styles_PopoverContainerComponent:any[] = ['.bs-popover-top[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-popover-bottom[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      left: calc
(50% - 5px);\n    }\n    .bs-popover-left[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-popover-right[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      top: calc(50% - 2.5px);\n    }'];
      | export const RenderType_PopoverContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:0,
      |     styles:styles_PopoverContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 15:0-114
       @ ./ClientApp/boot.server.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/tooltip/tooltip-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\tooltip\tooltip-container.component.ngfactory.ts Unexpected token (12:38)
      You may need an appropriate loader to handle this file type.
      | import * as i1 from 'ngx-bootstrap/tooltip/tooltip-container.component';
      | import * as i2 from 'ngx-bootstrap/tooltip/tooltip.config';
      | const styles_TooltipContainerComponent:any[] = ['.tooltip[_nghost-%COMP%] {\n      display: block;\n    }\n    .bs-tooltip-top[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-tooltip-bottom[_
nghost-%COMP%]   .arrow[_ngcontent-%COMP%] {\n      left: calc(50% - 2.5px);\n    }\n    .bs-tooltip-left[_nghost-%COMP%]   .arrow[_ngcontent-%COMP%], .bs-tooltip-right[_nghost-%COMP%]   .arrow[_ngcon
tent-%COMP%] {\n      top: calc(50% - 2.5px);\n    }'];
      | export const RenderType_TooltipContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:0,
      |     styles:styles_TooltipContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 16:0-114
       @ ./ClientApp/boot.server.ts

      ERROR in ./$$_gendir/~/ngx-bootstrap/typeahead/typeahead-container.component.ngfactory.ts
      Module parse failed: d:\project\dir\typeahead\typeahead-container.component.ngfactory.ts Unexpected token (12:40)
      You may need an appropriate loader to handle this file type.
      | import * as i1 from '@angular/common';
      | import * as i2 from 'ngx-bootstrap/typeahead/typeahead-container.component';
      | const styles_TypeaheadContainerComponent:any[] = ([] as any[]);
      | export const RenderType_TypeaheadContainerComponent:i0.RendererType2 = i0.鈺斺暋crt({encapsulation:2,
      |     styles:styles_TypeaheadContainerComponent,data:{}});
       @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 17:0-119
       @ ./ClientApp/boot.server.ts

Tools info:

aspnet-prerendering: 3.0.1
webpack: 2.5.1
angular: 4.4.1
@ngtools/webpack: 1.7.1
comp(build)
Source
picture daviatorstorm
👍1

Most helpful comment

Thanks for that. I've solved my problem.
Changed
{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }
to
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }

picture daviatorstorm on 22 Sep 2017
👍3

All 4 comments

Check this issue. Seems to be related
https://github.com/aspnet/JavaScriptServices/issues/1168

davidsekar picture davidsekar on 22 Sep 2017

Thanks for that. I've solved my problem.
Changed
{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }
to
{ test: /.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }

daviatorstorm picture daviatorstorm on 22 Sep 2017
👍3

@daviatorstorm Just FYI,
That will disable AoT compilation in the production builds. Your production bundle may become larger with unwanted/unused module imported in it.

BTW, check out this repo with ngx-bootstrap integrated
https://github.com/MarkPieszak/aspnetcore-angular2-universal

davidsekar picture davidsekar on 22 Sep 2017

@daviatorstorm You my friend are a genius. Solved my problem and saved me so much time. Thank you!!!

arufolo picture arufolo on 11 Dec 2017
Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghiscoding picture ghiscoding  路  3Comments
srjkrl20011991 picture srjkrl20011991  路  3Comments
hugonne picture hugonne  路  3Comments
MrBlaise picture MrBlaise  路  3Comments
YevheniiaMazur picture YevheniiaMazur  路  3Comments