模块解析失败：*.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'
      ]
    }