Angular使用ng serve启动时所有console.log均来自main.js:1问题咨询

问题根因 #

你遇到的控制台日志定位不准问题，是因为ng serve -- -c deploy对应的构建配置未生成可正确映射到源码的sourceMap，同时代码压缩混淆逻辑导致浏览器无法关联打包后代码与原始组件文件。
从你提供的angular.json可以看到两处核心配置问题：

• serve配置项中的deploy分支，对应的browserTarget为project:build，仅调用了build的基础默认配置，该配置未显式开启sourceMap，Angular非开发模式下默认会关闭sourceMap生成
• 如果你实际需要使用生产构建配置测试，现有production配置中开启了optimization: true和buildOptimizer: true，代码压缩、摇树、混淆逻辑也会导致sourceMap映射失效

解决方案 #

根据你的使用场景选择对应调整方案：

场景1：仅需自定义启动参数，无需生产级构建优化 #

1. 在build.configurations下新增专门的测试用deploy配置：

"deploy": {
  "sourceMap": true,
  "optimization": false,
  "buildOptimizer": false,
  "namedChunks": true,
  "vendorChunk": true,
  // 如需使用生产环境变量，可复制production配置中的fileReplacements段
}

2. 修改serve.configurations.deploy的browserTarget指向新增的build配置：

"deploy": {
  "browserTarget": "project:build:deploy"
}

修改完成后重启服务即可看到正确的日志调用位置。

场景2：必须使用生产构建配置测试，同时需要日志定位能力 #

在现有build.configurations.production中调整以下参数：

"sourceMap": {
  "scripts": true,
  "styles": true,
  "vendor": true
},
"optimization": {
  "scripts": false,
  "styles": true,
  "fonts": true
},
"buildOptimizer": false

注意：以上配置仅用于测试场景，正式上线的生产配置请恢复原有配置，否则会导致打包体积变大、运行性能下降。

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