モジュールの解析に失敗しました：* .ts予期しない文字 '@'

Question

スクリプトをバンドルするためにwebpackを取得できません。 @NgModule（{

私はメッセージを取得します：私はapp.module.tsに、このラインからのエラーを取得します。あなたはこのファイルタイプを処理するために、適切なローダーが必要な場合があります

ここに私のWebPACKの設定があります：

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    entry: ["./src/ts/main.ts","./src/ts/css.ts"], 
    module: { 
     rules: [ 
     { 
      test: /\.tsx$/, 
      loaders: [ 
      { 
       loader: 'awesome-typescript-loader', 
       options: { configFileName: 'tsconfig.json' } 
      } , 'angular2-template-loader' 
      ] 
     }, 
     { 
      test: /\.css$/, 
      use: ExtractTextPlugin.extract({use: 'css-loader'}) 
     }, 
     { 
      test: /\.(jpe?g|png|gif|svg)$/i, 
      use: ['url-loader?limit=10000', 'img-loader'] 
     }, 
     { 
      test: /\.(eot|woff2?|ttf)$/i, 
      use: 'url-loader' 
     } 
     ] 
    }, 
    resolve: { 
    extensions: [".tsx", ".ts", ".js"] 
    }, 
    plugins: [ 
    new ExtractTextPlugin("public/styles.css"), 
    ], 
    output: { 
    filename: "public/bundle.js" 
    } 
} 

はここtsconfig.jsonです：

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": [ "es2015", "dom" ], 
    "noImplicitAny": true, 
    "suppressImplicitAnyIndexErrors": true, 
    "rootDir": "src/ts" 
    }, 
    "angularCompilerOptions": { 
    "genDir": "public/dist/js" 
    }, 
    "exclude": [ 
    "node_modules", 
    "**/*-aot.ts" 
    ], 
    "filesGlob": [ 
    "src/ts/**/*.ts" 
    ] 
} 

それはmain.ts.を通じてapp.module.tsために取得

Answer 1

あなたのファイルにはtsの拡張が含まれていますが、ウェブパックの設定のルールは内線番号tsxと一致しています。両方の拡張機能を処理するには、/\.tsx$\のパターンを/\.tsx?$\に変更します。

{ 
     test: /\.tsx?$/, 
     loaders: [ 
     { 
      loader: 'awesome-typescript-loader', 
      options: { configFileName: 'tsconfig.json' } 
     } , 'angular2-template-loader' 
     ] 
    }