Angular15升级至16后出现Module parse failed: Unexpected character '@'错误

常见原因及修复方案 #

1. 检查路径别名配置 #

• 确认tsconfig.json里的paths配置无误，示例：

  "compilerOptions": {
    "paths": {
      "@app/*": ["src/app/*"],
      "@env/*": ["src/environments/*"]
    }
  }
  

• 同步检查angular.json的build配置，确保别名对应路径被正确识别，若有引用CommonJS包，需在allowedCommonJsDependencies中配置对应依赖。

2. 清理缓存并重新构建 #

• 执行以下命令清理缓存并重装依赖：

  rm -rf node_modules package-lock.json yarn.lock
  npm cache clean --force
  npm install
  ng build --delete-output-path
  

3. 排查第三方依赖兼容性 #

• 用npm outdated查看依赖版本，将不支持Angular 16的依赖升级到对应兼容版本。
• 若部分依赖无法升级，可在angular.json的build配置中添加允许的CommonJS依赖：

  "build": {
    "options": {
      "allowedCommonJsDependencies": ["问题依赖包名"]
    }
  }
  

4. 检查自定义webpack配置（如有） #

• 若项目用了@angular-builders/custom-webpack等自定义配置，确认ts-loader或babel-loader能正确解析@开头的路径别名，不要覆盖Angular默认的模块解析规则。

5. 对齐Angular CLI版本 #

• 检查全局与本地CLI版本是否均为16.x：

  ng --version
  

• 版本不一致时，更新本地CLI：

  npm install @angular/cli@16 --save-dev
  

内容的提问来源于stack exchange，提问作者suraj p Yedre