Angular CLI升级至12后Debugger调试功能失效问题排查

看起来你在升级到Angular 12后遇到了调试工具失效的问题，结合你提供的配置文件，我帮你梳理几个关键的调整点：

1. 关闭Debug环境下的AOT编译与构建优化 #

你的debug构建配置中同时开启了aot: true和buildOptimizer: true，但Angular 12的AOT编译与构建优化会对代码进行深度处理，可能会改变debugger语句的位置甚至移除它，直接导致调试失效。在调试环境下建议使用更适合调试的JIT模式，同时关闭构建优化：

"debug": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.debug.ts"
    }
  ],
  "optimization": false,
  "outputHashing": "all",
  "sourceMap": true,
  "extractCss": true,
  "namedChunks": false,
  "aot": false, // 修改为false，启用JIT模式
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": false // 关闭构建优化，保留原始代码结构
}

2. 为Serve命令添加Debug配置映射 #

你的serve部分没有配置debug环境的映射，导致运行ng serve --configuration=debug时无法正确加载你定义的debug构建规则。需要在architect.serve.configurations中添加对应配置：

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "my-portal-web:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "my-portal-web:build:production"
    },
    "debug": { // 添加debug环境的serve映射
      "browserTarget": "my-portal-web:build:debug"
    }
  }
}

3. 确保SourceMap配置完整且生效 #

虽然你在debug配置中开启了sourceMap: true，可以进一步细化配置确保所有代码（包括第三方依赖）都能正确映射到源码：

"sourceMap": {
  "scripts": true,
  "styles": true,
  "vendor": true
}

同时要检查src/tsconfig.app.json中的compilerOptions.sourceMap是否设置为true——因为构建时会优先使用这个配置文件，而非根目录的tsconfig.json。

4. 使用正确的命令启动调试服务器 #

完成以上配置后，使用以下命令启动调试服务器，确保加载的是debug环境：

ng serve --configuration=debug

额外检查点 #

• 确认浏览器开发者工具的Sources面板中，能找到你的原始源码文件（而非编译后的bundle文件）
• 检查浏览器是否禁用了JavaScript调试功能（部分隐私模式或插件可能会影响）

这些调整应该能让你的debugger语句恢复正常工作，和Angular 11时的体验一致。

内容的提问来源于stack exchange，提问作者T. Chendke