执行Webpack命令时@NgModule未识别错误的技术求助

这个错误的核心原因是你的Webpack配置没有正确处理TypeScript中的装饰器语法（像@NgModule这类）——当前使用的babel-loader默认不支持TypeScript装饰器，也没有结合Angular官方的编译工具链。下面是具体的修复步骤：

1. 安装必要依赖 #

先安装适配Angular的Webpack工具和TypeScript处理loader：

npm install @ngtools/webpack ts-loader typescript --save-dev

2. 修正Webpack配置文件 #

你需要替换掉原配置里的babel-loader，改用Angular官方的@ngtools/webpack（推荐，更适配Angular生态）或ts-loader来处理TypeScript文件。

修改后的webpack.config.js（使用@ngtools/webpack）： #

const path = require('path');
const ngtools = require('@ngtools/webpack');

module.exports = {
  resolve: {
    extensions: ['.ts', '.js'],
    alias: {
      "@angular/upgrade/static": "@angular/upgrade/bundles/upgrade-static.umd.js"
    }
  },
  entry: './src/app/angular6/src/main.ts',
  output: {
    path: path.join(process.cwd(), 'dist'),
    publicPath: 'dist/',
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: '@ngtools/webpack'
      }
    ]
  },
  plugins: [
    new ngtools.AngularCompilerPlugin({
      tsConfigPath: './tsconfig.json',
      mainPath: './src/app/angular6/src/main.ts'
    })
  ]
};

若选择使用ts-loader，可将rules替换为： #

{
  test: /\.ts$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'ts-loader',
      options: {
        configFile: 'tsconfig.json'
      }
    }
  ]
}

3. 修正TypeScript配置文件 #

注意你的配置文件名写错了，应该是tsconfig.json而非tsconfig.js，同时补充完整配置结构：

{
  "compilerOptions": {
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "noImplicitAny": false,
    "sourceMap": true,
    "mapRoot": "",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2017",
      "dom"
    ],
    "outDir": "lib",
    "skipLibCheck": true,
    "rootDir": "."
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

关键细节说明 #

• @ngtools/webpack是Angular官方提供的Webpack插件，能完美处理Angular的装饰器、模板编译等专属特性，比单纯用babel-loader更适配Angular项目。
• 必须确保tsconfig.json中的experimentalDecorators和emitDecoratorMetadata设为true，这是TypeScript支持装饰器语法的必要配置。
• 确认入口文件路径./src/app/angular6/src/main.ts和你实际的文件位置一致。

完成以上修改后，重新运行Webpack命令：

node-modules\.bin\webpack

应该就能解决unexpected token at @NgModule的错误了。

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