Angular集成Webpack遇Module parse错误：@符号未识别求排查

嘿，我一眼就揪出问题根源了！你的Webpack没法识别@NgModule里的@符号，核心原因有两个：loader没作用到你的.ts文件上，以及TypeScript编译选项没开启装饰器支持。下面是一步步的修复方案：

1. 修正Webpack配置的Loader规则 #

你的webpack.config.js里，loader规则只匹配.tsx文件，但你的Angular项目文件都是.ts后缀（比如app.module.ts），导致这些文件完全没被TypeScript loader处理，自然识别不了装饰器语法。

修改module.rules部分：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.tsx?$/, // 改成.tsx?，同时匹配.ts和.tsx文件
        use: 'awesome-typescript-loader',
        exclude: /node_modules/ // 排除node_modules，避免编译第三方代码
      }
    ]
  }
}

2. 配置TypeScript支持装饰器 #

Angular的装饰器语法需要TypeScript开启特定编译选项，你需要在项目根目录创建或修改tsconfig.json文件，添加关键配置：

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true, // 必须开启这个才能识别@装饰器
    "lib": ["ES2015", "DOM"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": ["./node_modules/@types/"]
  },
  "include": ["./src/**/*"] // 确保src下所有ts文件都被编译
}

3. 验证依赖兼容性（可选） #

你当前的依赖版本（Webpack 4 + awesome-typescript-loader 5 + TypeScript 2.7）是兼容的，但如果还是有问题，可以显式指定awesome-typescript-loader读取你的tsconfig.json：

use: {
  loader: 'awesome-typescript-loader',
  options: {
    configFileName: './tsconfig.json'
  }
}

做完以上修改后，重新运行npm start，应该就能正常解析@NgModule，模块错误也会消失啦！

内容的提问来源于stack exchange，提问作者Harry