tsconfig与angular.json中sourceMap设置的差异及生效问题解析

核心原因：Angular CLI构建配置优先级更高 #

Angular CLI的环境构建配置（angular.json）会直接覆盖tsconfig.json中的TypeScript编译器选项，这是导致你在tsconfig.json中设置"sourceMap": true无效的关键原因。

生产环境（prod）的默认构建策略是禁用source map，目的是减小最终打包产物的体积、避免暴露源码细节。所以即使你在tsconfig.json中开启了sourceMap，Angular CLI在执行生产构建时，会默认使用prod配置里的"sourceMap": false覆盖你的tsconfig设置。只有当你在angular.json的prod构建配置中明确设置"sourceMap": true时，CLI才会遵循这个指令生成source map。

和Angular专属编译器的关系 #

你提到的Angular专属编译器（Angular Compiler，ngc）确实会处理装饰器、模板等TypeScript原生编译器不支持的Angular特有语法，但这不是tsconfig设置无效的直接原因。ngc是基于tsc扩展的，它依然会读取tsconfig的基础配置，但最终的构建行为还是由Angular CLI的构建参数来主导。

正确配置方式 #

要在生产构建中启用source map，直接修改angular.json中对应项目的prod配置即可：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "sourceMap": true,
            // 其他生产环境配置（如优化、压缩等）
          }
        }
      }
    }
  }
}

此时不管tsconfig.json中的sourceMap设置是true还是false，生产构建都会生成source map。

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