Modulparse fehlgeschlagen: ... Unerwartetes Token. Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten.

Question

Ich lerne, wie man .NET Core mit Angular 4-Anwendungen erstellt.

Jetzt migriere ich meine App von Core 1.1 - Angular 4.1.2 zu Core 2.0 - Angular 4.3.6.

In der alten Version habe ich kein Webpack verwendet. Jetzt benutze ich es für angular/cli, ngx-translate und andere.

konnte ich die alte Version zu Azure oder lokal veröffentlichen, aber nicht diese, weil ich diese Fehler erhalten:

ERROR in ./$$_gendir/node_modules/angular2-flash-messages/module/flash-messages.component.ngfactory.ts 
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\angular2-flash-messages\module\flash-messages.component.ngfactory.ts Unexpected token (13:35) 
    You may need an appropriate loader to handle this file type. 
    | import * as i2 from 'angular2-flash-messages/module/flash-messages.component'; 
    | import * as i3 from 'angular2-flash-messages/module/flash-messages.service'; 
    | const styles_FlashMessagesComponent:any[] = ([] as any[]); 
    | export const RenderType_FlashMessagesComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2, 
    |  styles:styles_FlashMessagesComponent,data:{}}); 
    @ ./$$_gendir/ClientApp/app/components/app/app.component.ngfactory.ts 13:0-126 
    @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 
    @ ./ClientApp/boot.server.ts 

    ERROR in ./$$_gendir/node_modules/ng2-auto-complete/dist/ng2-auto-complete.component.ngfactory.ts 
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ng2-auto-complete\dist\ng2-auto-complete.component.ngfactory.ts Unexpected token (15:37) 
    You may need an appropriate loader to handle this file type. 
    | import * as i4 from 'ng2-auto-complete/dist/ng2-auto-complete'; 
    | import * as i5 from '@angular/http'; 
    | const styles_Ng2AutoCompleteComponent:any[] = ['\n @keyframes slideDown {\n 0% {\n  transform: translateY(-10px);\n }\n 100% {\n  transform: translateY(0px);\n }\n }\n .ng2-auto-complete {\n background-color: transparent;\n }\n .ng2-auto-complete > input {\n outline: none;\n border: 0;\n padding: 2px; \n box-sizing: border-box;\n background-clip: content-box;\n }\n\n .ng2-auto-complete > ul {\n background-color: #fff;\n margin: 0;\n width : 100%;\n overflow-y: auto;\n list-style-type: none;\n padding: 0;\n border: 1px solid #ccc;\n box-sizing: border-box;\n animation: slideDown 0.1s;\n }\n .ng2-auto-complete > ul.empty {\n display: none;\n }\n\n .ng2-auto-complete > ul li {\n padding: 2px 5px;\n border-bottom: 1px solid #eee;\n }\n\n .ng2-auto-complete > ul li.selected {\n background-color: #ccc;\n }\n\n .ng2-auto-complete > ul li:last-child {\n border-bottom: none;\n }\n\n .ng2-auto-complete > ul li:hover {\n background-color: #ccc;\n }']; 
    | export const RenderType_Ng2AutoCompleteComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2, 
    |  styles:styles_Ng2AutoCompleteComponent,data:{}}); 
    @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 12:0-115 
    @ ./ClientApp/boot.server.ts 

    ERROR in ./$$_gendir/node_modules/ng2-toasty/src/toasty.component.ngfactory.ts 
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ng2-toasty\src\toasty.component.ngfactory.ts Unexpected token (15:28) 
    You may need an appropriate loader to handle this file type. 
    | import * as i4 from 'ng2-toasty/src/toasty.component'; 
    | import * as i5 from 'ng2-toasty/src/toasty.service'; 
    | const styles_ToastyComponent:any[] = ([] as any[]); 
    | export const RenderType_ToastyComponent:i0.RendererType2 = i0.╔╡crt({encapsulation:2, 
    |  styles:styles_ToastyComponent,data:{}}); 
    @ ./$$_gendir/ClientApp/app/components/to-do/to-do-list.component.ngfactory.ts 11:0-102 
    @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 
    @ ./ClientApp/boot.server.ts 

    ERROR in ./$$_gendir/node_modules/ngx-modialog/plugins/bootstrap/src/ngx-modialog-bootstrap.ng-flat.ngfactory.ts 
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ngx-modialog\plugins\bootstrap\src\ngx-modialog-bootstrap.ng-flat.ngfactory.ts Unexpected token (14:42) 
    You may need an appropriate loader to handle this file type. 
    | import * as i3 from '@angular/common'; 
    | import * as i4 from 'ngx-modialog'; 
    | export const BootstrapModalModuleNgFactory:i0.NgModuleFactory<i1.BootstrapModalModule> = i0.╔╡cmf(i1.BootstrapModalModule, 
    |  ([] as any[]),(_l:any) => { 
    |  return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver, 
    @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 11:0-130 
    @ ./ClientApp/boot.server.ts 

    ERROR in ./$$_gendir/node_modules/ngx-modialog/src/ngx-modialog.ng-flat.ngfactory.ts 
    Module parse failed: C:\Users\Andrei\ECV\ECV\$$_gendir\node_modules\ngx-modialog\src\ngx-modialog.ng-flat.ngfactory.ts Unexpected token (12:33) 
    You may need an appropriate loader to handle this file type. 
    | import * as i1 from 'ngx-modialog'; 
    | import * as i2 from '@angular/common'; 
    | export const ModalModuleNgFactory:i0.NgModuleFactory<i1.ModalModule> = i0.╔╡cmf(i1.ModalModule, 
    |  ([] as any[]),(_l:any) => { 
    |  return i0.╔╡mod([i0.╔╡mpd(512,i0.ComponentFactoryResolver,i0.╔╡CodegenComponentFactoryResolver, 
    @ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 10:0-102 
    @ ./ClientApp/boot.server.ts 

Diese sind alle weiteren installierten Bibliotheken.

Ich kann das Projekt lokal ausführen.

Ich habe die commad laufen:

webpack --config webpack.config.vendor.js 

in der Wurzel meines Projekts.

Ich weiß nicht, was ich schreiben soll und wo für Webpack diese Bibliotheken korrekt geladen werden können.

Ich vermute, es muss in webpack.config.js sein (von dem, was ich im Internet gelesen habe), aber was ich gefunden habe, waren Lösungen für React oder ich wusste nicht, wo die Änderungen hinzufügen.

Mein webpack.config.js ist:

const path = require('path'); 
const webpack = require('webpack'); 
const merge = require('webpack-merge'); 
const AotPlugin = require('@ngtools/webpack').AotPlugin; 
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin; 

module.exports = (env) => { 
    // Configuration in common to both client-side and server-side bundles 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     context: __dirname, 
     resolve: { extensions: [ '.js', '.ts' ] }, 
     output: { 
      filename: '[name].js', 
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 
       { test: /\.html$/, use: 'html-loader?minimize=false' }, 
       { test: /\.css$/, use: [ 'to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize' ] }, 
       { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' } 
      ] 
     }, 
     plugins: [new CheckerPlugin()] 
    }; 

    // Configuration for client-side bundle suitable for running in browsers 
    const clientBundleOutputDir = './wwwroot/dist'; 
    const clientBundleConfig = merge(sharedConfig, { 
     entry: { 'main-client': './ClientApp/boot.browser.ts' }, 
     output: { path: path.join(__dirname, clientBundleOutputDir) }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./wwwroot/dist/vendor-manifest.json') 
      }) 
     ].concat(isDevBuild ? [ 
      // Plugins that apply in development builds only 
      new webpack.SourceMapDevToolPlugin({ 
       filename: '[file].map', // Remove this line if you prefer inline source maps 
       moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk 
      }) 
     ] : [ 
      // Plugins that apply in production builds only 
      new webpack.optimize.UglifyJsPlugin(), 
      new AotPlugin({ 
       tsConfigPath: './tsconfig.json', 
       entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'), 
       exclude: ['./**/*.server.ts'] 
      }) 
     ]) 
    }); 

    // Configuration for server-side (prerendering) bundle suitable for running in Node 
    const serverBundleConfig = merge(sharedConfig, { 
     resolve: { mainFields: ['main'] }, 
     entry: { 'main-server': './ClientApp/boot.server.ts' }, 
     plugins: [ 
      new webpack.DllReferencePlugin({ 
       context: __dirname, 
       manifest: require('./ClientApp/dist/vendor-manifest.json'), 
       sourceType: 'commonjs2', 
       name: './vendor' 
      }) 
     ].concat(isDevBuild ? [] : [ 
      // Plugins that apply in production builds only 
      new AotPlugin({ 
       tsConfigPath: './tsconfig.json', 
       entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'), 
       exclude: ['./**/*.browser.ts'] 
      }) 
     ]), 
     output: { 
      libraryTarget: 'commonjs', 
      path: path.join(__dirname, './ClientApp/dist') 
     }, 
     target: 'node', 
     devtool: 'inline-source-map' 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
}; 

Thank you!

Answer 1

Dies ist ein wenig raten, aber basierend auf den Details, die Sie gaben, können Sie von diesem Problem betroffen sein (Ihr Problem klingt ähnlich zu dem, den ich kürzlich hatte): Angular AOT error when having a component within a library.

Ich entfernte include: /ClientApp/, in webpack.config.js, um die Dinge wieder in Gang zu bringen.

Alt:

module: { 
     rules: [ 
      { test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 

Neu:

module: { 
     rules: [ 
      { test: /\.ts$/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 

Answer 2

Ich löste dies durch diese Zeile zu ändern:

{ test: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 

dazu:

{ test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, 

in webpack.config.js

ich nicht mit @yfisaqt funktionierten 's Lösung ...