Angular 9升级到12后Chrome开发者工具无法调试TS文件问题求助

Angular 12版本起默认对构建配置做了性能向调整，开发环境的sourceMap开关从原先的默认开启改为了和环境配置绑定，升级后没有手动调整配置就会出现Chrome开发者工具找不到TS源文件的问题，按以下步骤排查即可：

• 第一步：调整angular.json构建配置
  找到项目对应配置节点下的architect > build > options，将sourceMap设为true，如果你的启动命令指定了development配置，还要同步在configurations > development节点下也添加sourceMap: true的配置：

{
  "architect": {
    "build": {
      "options": {
        "sourceMap": true,
        // 其余原有配置保持不变
      },
      "configurations": {
        "development": {
          "sourceMap": true,
          "optimization": false,
          "buildOptimizer": false,
          // 其余原有配置保持不变
        }
      }
    }
  }
}

• 第二步：核对tsconfig.json编译配置
  确认compilerOptions下的以下属性配置正确：

  • sourceMap必须设置为true
  • 不要开启inlineSourceMap配置，避免内嵌的sourceMap导致Chrome识别异常
  • 没有特殊路径需求的话，直接删除mapRoot和sourceRoot配置项，让Angular自动处理路径映射即可

• 第三步：清除缓存重启开发服务
  配置修改完成后，执行以下命令重启开发服务，避免本地缓存影响配置生效：

ng serve --configuration=development

服务启动后打开Chrome开发者工具，按Ctrl+P（Mac设备按Cmd+P）直接搜索对应TS文件名，就可以找到源文件打断点调试了。

注意：生产环境不要开启sourceMap配置，会直接暴露项目源码，存在安全风险

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