模块解析失败:*.ts 意外字符“@" [英] Module parse failed: *.ts Unexpected character '@'

问题描述

我无法让 webpack 捆绑我的脚本.我从 app.module.ts 的这一行收到一个错误:@NgModule({

I'm having trouble getting webpack to bundle my scripts. I get an error from this line on app.module.ts: @NgModule({

我收到消息:您可能需要一个合适的加载器来处理这种文件类型.

I get the message: You may need an appropriate loader to handle this file type.

这是我的 webpack 配置:

Here's my webpack config:

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:

Here's 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.

It gets to app.module.ts through main.ts.

推荐答案

你的文件显然有一个 ts 扩展名，但你的 webpack 配置中的规则只匹配扩展名 tsx.将模式 /\.tsx$\ 更改为 /\.tsx?$\ 以处理两个扩展.

Your file has obviously a ts extension, but the rule in your webpack config matches only the extension tsx. Change the pattern /\.tsx$\ to /\.tsx?$\ to handle both extensions.

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

这篇关于模块解析失败:*.ts 意外字符“@"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！