使用ng-bootstrap編譯JavaScriptServices項目時出現意外的令牌

Question

我正在使用JavaScriptServices來開發Angular應用程序。在將ng-bootstrap添加到我的項目中後，編譯生產時（在爲dev編譯時工作正常），我收到許多'Unexpected token'Webpack編譯錯誤。請參見下面的錯誤之一：

ERROR in ./$$_gendir/~/@ng-bootstrap/ng-bootstrap/alert/alert.ngfactory.ts 
Module parse failed: D:\Data\Code\VSprod\Aerium.Velocity\src\Aerium.Velocity.Mgmt.Angular\$$_gendir\node_modules\@ng-bootstrap\ng-bootstrap\alert\alert.ngfactory.ts Unexpected token (13:21) 
You may need an appropriate loader to handle this file type. 
| import * as i2 from '@ng-bootstrap/ng-bootstrap/alert/alert'; 
| import * as i3 from '@ng-bootstrap/ng-bootstrap/alert/alert-config'; 
| const styles_NgbAlert:any[] = ([] as any[]); 
| export const RenderType_NgbAlert:i0.RendererType2 = i0.ɵcrt({encapsulation:2,styles:styles_NgbAlert, 
|  data:{}}); 
@ ./$$_gendir/ClientApp/app/app.module.server.ngfactory.ts 10:0-103 
@ ./ClientApp/boot.server.ts 

Asp.Net的Core 2

節點：8.7.0

的WebPack：3.8.1

伍的自舉：1.0.0-β 0.5

我webpack.config.js文件：

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: /\.ts$/, include: /ClientApp/, use: isDevBuild ? ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] : ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }, 
       { 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]; 
}; 

如果我使用['awesome-typescript-loader？silent = true'，'angular2-template-loader']加載代替'@ ngtools/webpack'（按照開發工具鏈），一切正常。

我真的很感激一些方向。

非常感謝提前。 Andrew

Answer 1

我在不同的線程上找到了答案 - https://github.com/aspnet/JavaScriptServices/issues/1168#issuecomment-320026397 它其實很簡單，希望它能爲你工作。