Angular应用线上无法在开发者工具查看源码，求解决方案

1. 检查Angular构建配置 #

打开项目根目录的angular.json，定位到生产环境构建配置节点：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "production": {
            "sourceMap": {
              "scripts": true,
              "styles": true,
              "hidden": false,
              "exclude": []
            }
          }
        }
      }
    }
  }
}

• 确保sourceMap整体为true或包含上述子配置（hidden设为false，否则sourcemap不会被浏览器自动关联；exclude为空数组，避免排除关键文件）。
• 如果之前仅设置了"sourceMap": true，可以尝试展开为详细配置，避免默认隐式参数冲突。

2. 确认构建产物与部署完整性 #

• 执行生产构建命令ng build --configuration production后，检查dist/（或自定义outputPath）目录下是否生成了对应的.map文件（每个js/css文件对应一个.map文件）。
• 确认部署脚本/工具没有过滤或删除.map文件，比如CI/CD流程中的清理步骤、服务器配置（如Nginx的location规则）是否禁止访问.map后缀文件。

3. 排查构建命令参数冲突 #

• 避免在构建时手动添加--source-map=false参数，这会覆盖angular.json中的配置。
• 若使用ng build --prod，注意--prod在Angular 12+中是--configuration production的别名，需确保production配置的sourcemap已正确开启。

4. 验证浏览器开发者工具设置 #

• 打开Chrome DevTools，进入Settings（右上角齿轮图标）→ Debugger，确保勾选Enable JavaScript source maps和Enable CSS source maps。
• 刷新页面后，重新查看Sources面板，确认源码是否加载。

额外提示（针对SSR场景） #

如果是SSR项目，需同时检查服务端构建配置：

• 定位到architect -> server -> configurations -> production，确保同样开启了sourceMap配置。
• 部署时同步上传服务端构建产物中的.map文件。

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