Angular应用报错仅指向main.js不显示对应组件及行号问题求助

问题根因 #

你的angular.json未配置开发环境构建规则，默认本地启动时未开启sourceMap，导致打包后的运行时代码无法映射到原始的组件、TypeScript文件，因此仅能显示main.js中的打包后错误位置。

修复步骤 #

1. 打开angular.json，找到projects.route-app.architect.build.configurations节点，在已有的production配置同级添加开发环境配置：

"development": {
  "buildOptimizer": false,
  "optimization": false,
  "vendorChunk": true,
  "extractLicenses": false,
  "sourceMap": true,
  "namedChunks": true
}

2. 在projects.route-app.architect.build节点下（与options、configurations同级）添加默认构建配置指定：

"defaultConfiguration": "production"

3. 找到projects.route-app.architect.serve.configurations节点，在已有的production配置同级添加开发服务配置：

"development": {
  "browserTarget": "route-app:build:development"
}

4. 在projects.route-app.architect.serve节点下（与options、configurations同级）添加本地服务默认配置指定：

"defaultConfiguration": "development"

验证 #

修改完成后终止当前ng serve进程，重新执行ng serve启动项目，触发报错后即可看到对应原始组件文件路径与具体行号。
如果仅需临时开启sourceMap调试，也可以直接使用启动命令ng serve --source-map=true，无需修改配置文件。

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