ng-bootstrapを使用してJavaScriptServicesプロジェクトをコンパイルするときに予期しないトークン

Question

JavaScriptServicesを使用してAngularアプリケーションを開発しています。私のプロジェクトにng-bootstrapを追加した後、プロダクション用にコンパイルするときに、「予期しないトークン」Webpackコンパイルエラーが多数発生しています（はdevのコンパイル時にうまく動作します）。

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

NG-ブートストラップ：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]; 
}; 

「@ ngtools/webpack」（dev toolchainによる）の代わりにロードされた['awesome-typescript-loader？silent = true'、 'angular2-template-loader'

私は本当にある方向に感謝します。

事前に感謝します。 アンドリュー

Answer 1

は、私は別のスレッドで答えを見つけた - https://github.com/aspnet/JavaScriptServices/issues/1168#issuecomment-320026397 それがうまくいけば、それはあなたのために働くだろう、実際には非常に簡単です。