Angular CLI生成TypeScript SourceMap，但浏览器仅加载样式SourceMap求助

我来帮你排查这个SourceMap的问题——从你贴出的angular.json和tsconfig配置来看，所有该开的SourceMap开关都已经打开了，而且新建CLI项目功能正常，说明问题大概率出在现有项目的特殊配置、依赖或者缓存上，咱们一步步来排查：

1. 先检查浏览器DevTools的SourceMap设置 #

很多时候问题出在浏览器端的配置，而非项目本身：

• 以Chrome为例，打开DevTools的Settings（右上角三个点→Settings），找到Experiments选项卡，确保Disable JavaScript source maps没有被勾选；
• 切换到Sources面板，确认顶部的Enable JavaScript source maps是勾选状态。
  样式SourceMap能正常加载，说明浏览器的SourceMap功能本身没问题，很可能只是JS的选项被意外禁用了。

2. 验证构建产物的SourceMap关联是否正确 #

构建完成后，去dist/vorschlag目录下做两个检查：

• 打开main.js文件，拉到最后一行，应该能看到类似//# sourceMappingURL=main.js.map的注释，这是JS文件和SourceMap文件的关联标记，如果没有的话，说明构建过程没有生成这个关联；
• 在浏览器中直接访问http://localhost:7002/main.js.map，如果返回404，说明构建生成的map文件路径有误，或者dev-server没有正确提供这个静态资源。

3. 排查第三方依赖或遗留Webpack配置的干扰 #

因为你的项目是从旧Webpack项目迁移到CLI的，很可能存在遗留的配置或冲突依赖：

• 检查项目根目录有没有遗留的webpack.config.js文件，虽然Angular CLI默认不会读取自定义Webpack配置，但如果之前安装过@angular-builders/custom-webpack之类的插件，可能会有隐性影响；
• 尝试临时移除所有非Angular核心的第三方依赖（先备份package.json），只保留@angular/core、@angular/cli等基础包，重新构建后看看JS SourceMap是否正常。如果恢复正常，再逐个加回依赖，排查哪个包导致了问题。

4. 清理构建缓存 #

Angular CLI会缓存构建产物，旧的缓存文件可能导致异常：

• 运行ng clean（如果Angular 8不支持这个命令，直接手动删除dist目录和项目根目录下的.angular缓存文件夹）；
• 然后重新执行ng serve或ng build，确保构建是完全从头开始的。

5. 确认Angular CLI版本兼容性 #

Angular 8对应的CLI版本必须是8.x系列，版本不匹配可能导致奇怪的构建问题：

• 运行ng --version查看当前CLI版本，如果版本过高（比如9+），先全局卸载旧CLI：npm uninstall -g @angular/cli；
• 安装对应8.x版本的CLI：npm install -g @angular/cli@8.3.29（这个是Angular 8的最后稳定版本）；
• 再更新本地项目的CLI依赖：npm install @angular/cli@8.3.29 --save-dev，然后重新构建。

6. 检查tsconfig的额外配置 #

虽然你的tsconfig.json里sourceMap已经设为true，但还是确认下有没有其他可能覆盖的配置：

• 检查compilerOptions里有没有inlineSourceMap或inlineSources设为true，如果开启了inlineSourceMap，SourceMap会被嵌入到JS文件中，而非生成单独的.map文件，这可能导致浏览器识别异常。

按照这个顺序排查，应该能找到问题所在。如果还是不行，可以尝试把项目的src目录复制到一个全新的Angular 8 CLI项目中，逐步迁移配置和依赖，这样能快速定位是配置问题还是依赖问题。

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