Angular 12升级后开发者工具Sources面板无法查看.ts文件的排查求助

• 优先调整dev环境构建的优化配置：你当前angular.json的dev配置中同时开启了optimization: true和buildOptimizer: true，这两项是生产环境用于代码压缩、Tree Shaking的配置，会破坏源码映射关系。开发环境下需要将这两项都改为false才能正常生成可用的sourceMap。
• 检查自定义webpack配置：你使用了@angular-builders/custom-webpack自定义打包逻辑，需要确认extra-webpack.config.js中的devtool配置是否正确，需设置为eval-source-map或source-map这类支持源码映射的选项，避免webpack配置覆盖Angular的sourceMap设置。
• 核对tsconfig配置：打开tsconfig.app.json，确认compilerOptions下存在"sourceMap": true配置，TypeScript编译阶段如果关闭了sourceMap生成，后续打包环节也无法生成有效的源码映射。
• 确认启动命令使用了正确的配置：Angular12之后默认启动不会自动使用dev配置，需要显式指定配置启动：ng serve --configuration development，否则会使用build节点下的默认配置，而你默认配置中未开启sourceMap，会导致源码不加载。
• 检查sourceMap隐藏配置：确认dev配置中没有设置hiddenSourceMap: true，该配置会生成sourceMap但不会在打包后的JS文件末尾追加sourceMap地址注释，浏览器无法自动识别加载。
• 核对浏览器开发者工具设置：打开浏览器DevTools的设置面板，确认Enable JavaScript source maps选项处于勾选状态，避免浏览器主动禁用源码映射加载。

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