Webpack-Fehler beim Publizieren mit Angular 4.2.5

Question

Ich habe eine App mit den SPA-Vorlagen erstellt. Die Angular App verwendet die Komponenten primeng für die Benutzeroberfläche. Um die Bootstrap-, Fontawesome- und Primeng-Designs laufen zu lassen, habe ich webpack --config webpack.config.vendor.js ausgeführt, so dass ich die CSS-Dateien zum nonTreeShakableModules Array hinzufügen konnte. Alles scheint zu funktionieren, bis ich es veröffentliche.

Wenn ich versuche, zu veröffentlichen, ich die folgende Fehlermeldung erhalten

ERROR in ./$$_gendir/~/primeng/components/menu/menu.ngfactory.ts 
Module parse failed: .\$$_gendir\node_modules\primeng\components\menu\menu.ngfactory.ts Unexpected token (14:32) 
You may need an appropriate loader to handle this file type. 
| import * as i3 from '@angular/router'; 
| import * as i4 from 'primeng/components/dom/domhandler'; 
| export const MenuModuleNgFactory:i0.NgModuleFactory<i1.MenuModule> = i0.?cmf(i1.MenuModule, 
|  ([] as any[]),(_l:any) => { 
|  return i0.?mod([i0.?mpd(512,i0.ComponentFactoryResolver,i0.?CodegenComponentFactoryResolver, 
@ ./$$_gendir/ClientApp/app/components/locations/locations.component.ngfactory.ts 9:0-99 
@ ./$$_gendir/ClientApp/app/components/list/list.component.ngfactory.ts 
@ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 
@ ./ClientApp/boot.server.ts 

Ich habe diesen Fehler für jede primeng Komponente, die verwendet wird.

Answer 1

Dies kann passieren, weil das ASP.NET Core 2.0/Angular Template verschiedene Typoskriptlader für Entwicklung und Produktion verwendet: awesome-typescript-loader und angular2-template-loader in Entwicklung und @ngtools/webpack in Produktion.

Aus meiner Erfahrung, @ngtools/webpack nicht gut mit dem Laden einiger Winkelkomponenten von Drittanbietern. Sie können versuchen, awesome-typescript-loader und angular2-template-loader für Entwicklung und Produktion zu verwenden.