Webpack für Prod Fehler in Angular4 Projekt

Question

Ich habe mit einer Menge von Webpack-Fehlern mit einem "Dotnet New Angular" -Projekt (Angular 4, Dotnet Core 2.0.0) gekämpft.

Mein Projekt funktioniert gut in der Entwicklung. Aber wenn ich versuche, ein "dotnet publish" zu machen, benutzt es "webpack --env.prod" und das verursacht mein Problem. Ich denke, es ist mit AOT verwandt. Diese letzte Frage ist mir schleierhaft, und ich kann nicht finden, verursacht diesen Fehler:

ERROR in ./ClientApp/boot.browser.ts 
Module not found : error : Can't resolve './../$$_gendir/ClientApp/app/app.module.browser.ngfactory' in '/Users/a2ron44/Projects/CryptoGoblin/ClientApp' [/Users/a2ron44/Projects/CryptoGoblin/CryptoGoblin.csproj] 
     @ ./ClientApp/boot.browser.ts 5:0-95 
    Child 
     Hash: 0db56caee944b1d990af 
     Time: 14368ms 
       Asset  Size Chunks     Chunk Names 
     main-server.js 1.81 MB  0 [emitted] [big] main-server 

     ERROR in ./ClientApp/boot.server.ts 
Module not found : error : Can't resolve './../$$_gendir/ClientApp/app/app.module.server.ngfactory' in '/Users/a2ron44/Projects/CryptoGoblin/ClientApp' [/Users/a2ron44/Projects/CryptoGoblin/CryptoGoblin.csproj] 
     @ ./ClientApp/boot.server.ts 8:0-94 
/Users/a2ron44/Projects/CryptoGoblin/CryptoGoblin.csproj(48,5): error MSB3073: The command "node node_modules/webpack/bin/webpack.js --env.prod" exited with code 2. 

Hier ist meine webpack.config.js Datei:

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$/, 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(), new webpack.DefinePlugin({ "global.GENTLY": false })] 
 
    }; 
 

 
    // 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]; 
 
};

Gibt es noch etwas Ich sollte schauen?

Answer 1

Dies kann durch Ersetzen

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

mit

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

Wenn Sie wurden Winkel 5 Aktualisierung behoben werden, müssen Sie auch die AotPlugin mit dem AngularCompilerPlugin (dies ist im Grunde eine Suche ersetzen -und-ersetzen in der Datei)