模塊解析失敗：* .ts意外字符'@'

Question

我無法讓webpack捆綁我的腳本。我從這個行app.module.ts得到一個錯誤：@NgModule（{

我得到的消息：您可能需要適當的加載程序來處理此類文件

這裏是我的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擴展名，但您的webpack配置中的規則僅匹配擴展名tsx。將模式/\.tsx$\更改爲/\.tsx?$\以處理這兩個擴展。

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