2017-09-28 11 views
2

私はこのエラーに数時間いましたが、今までオンラインで見つかったものすべてを試しました。エラーは、--env.prodでビルドする場合にのみ、Angular Materialのすべての単一モジュールで発生します。 webpack設定ファイルはAsp.Net Core 2 Angular templateによって生成され、修正をテストするように修正されました。index.ngfactory.ts予期せぬトークン、このファイルタイプを処理するために適切なローダーが必要な場合があります

webpack.config.json

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'], modules: isDevBuild ? [] : [ "node_modules" ] }, 
     output: { 
      filename: '[name].js', 
      publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix 
     }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, include: /ClientApp/, loaders: 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.prod.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.prod.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]; 
}; 

webpack.config.vendor.json

const treeShakableModules = [ 
    '@angular/animations', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    'zone.js', 
]; 
const nonTreeShakableModules = [ 
    '@angular/material', 
    '@angular/material/prebuilt-themes/indigo-pink.css', 
    '@angular/cdk', 
    'es6-promise', 
    'es6-shim', 
    'event-source-polyfill' 
]; 
const allModules = nonTreeShakableModules.concat(treeShakableModules); 

module.exports = (env) => 
{ 
    const extractCSS = new ExtractTextPlugin('vendor.css'); 
    const isDevBuild = !(env && env.prod); 
    const sharedConfig = { 
     stats: { modules: false }, 
     resolve: { extensions: ['.js'], modules: isDevBuild ? [] : ["node_modules"] }, 
     module: { 
      rules: [ 
       { test: /\.ts$/, loaders: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : '@ngtools/webpack' }, 
       { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' } 
      ] 
     }, 
     output: { 
      publicPath: 'dist/', 
      filename: '[name].js', 
      library: '[name]_[hash]' 
     }, 
     plugins: [ 
      new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580 
      new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)@angular/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/14898 
      new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100 
     ] 
    }; 

    const clientBundleConfig = merge(sharedConfig, { 
     entry: { 
      // To keep development builds fast, include all vendor dependencies in the vendor bundle. 
      // But for production builds, leave the tree-shakable ones out so the AOT compiler can produce a smaller bundle. 
      vendor: isDevBuild ? allModules : nonTreeShakableModules 
     }, 
     output: { path: path.join(__dirname, 'wwwroot', 'dist') }, 
     module: { 
      rules: [ 
       { test: /\.css(\?|$)/, use: extractCSS.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) } 
      ] 
     }, 
     plugins: [ 
      extractCSS, 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ].concat(isDevBuild ? [] : [new webpack.optimize.UglifyJsPlugin()]) 
    }); 

    const serverBundleConfig = merge(sharedConfig, { 
     target: 'node', 
     resolve: { mainFields: ['main'] }, 
     entry: { vendor: allModules.concat(['aspnet-prerendering']) }, 
     output: { 
      path: path.join(__dirname, 'ClientApp', 'dist'), 
      libraryTarget: 'commonjs2', 
     }, 
     module: { 
      rules: [{ test: /\.css(\?|$)/, use: ['to-string-loader', isDevBuild ? 'css-loader' : 'css-loader?minimize'] }] 
     }, 
     plugins: [ 
      new webpack.DllPlugin({ 
       path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'), 
       name: '[name]_[hash]' 
      }) 
     ] 
    }); 

    return [clientBundleConfig, serverBundleConfig]; 
} 

package.json

"dependencies": { 
    "@angular/animations": "4.4.3", 
    "@angular/cdk": "2.0.0-beta.11", 
    "@angular/common": "4.4.3", 
    "@angular/compiler": "4.4.3", 
    "@angular/core": "4.4.3", 
    "@angular/flex-layout": "2.0.0-beta.9", 
    "@angular/forms": "4.4.3", 
    "@angular/http": "4.4.3", 
    "@angular/material": "2.0.0-beta.11", 
    "@angular/platform-browser": "4.4.3", 
    "@angular/platform-browser-dynamic": "4.4.3", 
    "@angular/router": "4.4.3", 
    "@ngtools/webpack": "1.7.1", 
    "@types/webpack-env": "1.13.0", 
    "angular2-template-loader": "0.6.2", 
    "aspnet-prerendering": "^3.0.1", 
    "aspnet-webpack": "^2.0.1", 
    "awesome-typescript-loader": "3.2.1", 
    "css": "2.2.1", 
    "css-loader": "0.28.4", 
    "es6-shim": "0.35.3", 
    "es6-promise": "4.1.1", 
    "event-source-polyfill": "0.0.9", 
    "expose-loader": "0.7.3", 
    "extract-text-webpack-plugin": "2.1.2", 
    "file-loader": "0.11.2", 
    "html-loader": "0.4.5", 
    "isomorphic-fetch": "2.2.1", 
    "json-loader": "0.5.4", 
    "preboot": "4.5.2", 
    "raw-loader": "0.5.1", 
    "reflect-metadata": "0.1.10", 
    "rxjs": "5.4.2", 
    "style-loader": "0.18.2", 
    "to-string-loader": "1.1.5", 
    "typescript": "2.4.1", 
    "url-loader": "0.5.9", 
    "webpack": "2.5.1", 
    "webpack-hot-middleware": "2.18.2", 
    "webpack-merge": "4.1.0", 
    "zone.js": "0.8.12" 
    }, 
    "devDependencies": { 
    "@angular/compiler-cli": "4.4.3", 
    "@angular/platform-server": "4.4.3", 
    "@types/hammerjs": "2.0.35", 
    "@angular/cli": "1.4.3" 
    } 

tsconfig.prod.json

{ 
    "compilerOptions": { 
    "module": "es2015", 
    "moduleResolution": "node", 
    "target": "es5", 
    "sourceMap": true, 
    "experimentalDecorators": true, 
    "emitDecoratorMetadata": true, 
    "skipDefaultLibCheck": true, 
    "skipLibCheck": true, // Workaround for https://github.com/angular/angular/issues/17863. Remove this if you upgrade to a fixed version of Angular. 
    "strict": true, 
    "lib": [ "es6", "dom" ], 
    "types": [ "webpack-env" ] 
    }, 
    "exclude": [ "bin", "node_modules" ], 
    "atom": { "rewriteTsconfig": false } 
} 

WebPACKのはこれで実行されている:

<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod --verbose" /> 
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod --verbose" /> 

答えて

関連する問題