Webpack - TypescriptとBabel "モジュールビルドに失敗しました：SyntaxError"

Question

node_modules\.bin\webpack -p --display-error-detailsを実行すると、多くの異なるファイルがバンドルされているというエラーメッセージModule build failed: SyntaxError...Unexpected token, expected ,が表示されます。

マイwebpack.config.js：

const webpack = require('webpack'); 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    entry: { 
     polyfills: './app/polyfills.ts', 
     app: './app/main.ts' 
    }, 
    output: { 
     path: path.resolve(__dirname, './dist'), 
     filename: '[name].js', 
     sourceMapFilename: '[file].map' 
    }, 
    module: { 
     rules: [ 
      //Order of loaders is important! 
      { 
       test: /\.ts(x?)$/, 
       exclude: ['node_modules'], 
       use: [{ loader: 'babel-loader' }, { loader: 'angular-router-loader' }, { loader: 'angular2-template-loader' }], 
      }, 
      { 
       test: /\.sass$/, 
       exclude: ['node_modules'], 
       use: [{ loader: 'css-to-string-loader' }, { loader: 'raw-loader' }, { loader: 'sass-loader', options: { sourceMap: true, sourceMapContents: true } }] 
      }, 
      { 
       test: /\.css$/, 
       exclude: ['node_modules'], 
       use: [{ loader: 'css-to-string-loader' }, { loader: 'raw-loader' }, { loader: 'css-loader' }] 
      }, 
      { 
       test: /\.html$/, 
       exclude: ['node_modules', 'index.html'], 
       use: [{ loader: 'raw-loader' }] 
      }, 
      { 
       test: /\.(otf|eot|svg|png|ttf|woff|woff2).*$/, 
       exclude: ['node_modules'], 
       use: [{ loader: 'url-loader' }] 
      } 
     ] 
    }, 
    resolve: { 
     extensions: ['.tsx', '.ts', '.js', '.css'], 
     modules: ["node_modules", "."] 
    }, 
    plugins: [ 

     new webpack.optimize.CommonsChunkPlugin({ 
      names: ['vendor'], 
      minChunks: function (module, count) { 
       // creates a common vendor js file for libraries in node_modules 
       return module.context && module.context.indexOf('node_modules') !== -1; 
      } 
     }), 

     new webpack.optimize.CommonsChunkPlugin({ 
      names: ['meta'], 
      chunks: ['vendor', 'app'] 
     }), 

     new HtmlWebpackPlugin({ 
      template: 'index.cshtml', 
      filename: 'index.cshtml', 
      inject: 'head' 
      , chunks: ['app', 'vendor', 'polyfills', 'meta'] 
      , chunksSortMode: 'dependency' 
      , hash: false 
     }), 

     new webpack.ContextReplacementPlugin(
     /angular(\\|\/)core(\\|\/)@angular/, //Update for Angular 4 
     root('./app'), 
     {} 
    ), 
    ] 
}; 
function root(__path) { 
    return path.join(__dirname, __path); 
} 

そして、私の.babelrc

{ 
    "presets": ["es2015", "stage-0"], 
    "plugins": ["transform-decorators-legacy"] 
} 

私は任意のヘルプははるかに高く評価されWebPACKのように使用して以前の経験を持っていません。私はAngular 4.1.0とbabel 6.24.1を使用しています。

Answer 1

私はあなたの代わりにバベルのTS-ローダーを使用（またはその両方の組み合わせ）すべきだと思う：

npm i -D ts-loader 

と試してみてください：私は行くことを与え、それが動作

{ 
     test: /\.ts(x?)$/, 
     exclude: ['node_modules'], 
     use: [{ loader: 'babel-loader' }, { loader: 'ts-loader' }, { loader: 'angular-router-loader' }, { loader: 'angular2-template-loader' }], 
    },