Angular从v11升级到v12后ng serve开启sourceMap出现白屏无报错问题

问题根因 #

Angular v12 版本的@angular-devkit/build-angular构建工具在v12.0~v12.1的正式版存在已知的sourceMap处理缺陷：当全局配置"sourceMap": true时，构建工具会同时生成业务代码、第三方依赖包、样式文件的全量sourceMap，开发模式下webpack dev-server加载全量sourceMap时会阻塞路由初始化流程，且该异常被dev模式的错误捕获逻辑吞掉，因此控制台无报错、仅渲染空的<router-outlet>标签。生产构建默认不会生成完整sourceMap，因此不受影响。

可行解决方案 #

方案1：精准控制sourceMap生成范围（推荐，无需升级依赖） #

不要直接将sourceMap设为布尔值，改为对象配置，仅保留业务脚本的sourceMap即可满足绝大多数调试需求，避免额外的加载开销。
sourceMap配置可以放在angular.json对应项目的build -> configurations -> development段，也可以放在serve -> configurations -> development段，两者会自动继承，配置示例如下：

"sourceMap": {
  "scripts": true,
  "styles": false,
  "vendor": false,
  "hidden": false
}

• scripts: true：保留业务TypeScript代码的sourceMap，完全支持断点调试业务逻辑
• styles: false：关闭样式文件sourceMap，无需调试样式时可长期关闭，需要时临时开启即可
• vendor: false：关闭第三方依赖包的sourceMap，这部分sourceMap体积占比超过90%，且日常调试几乎不需要

方案2：升级构建工具补丁版本 #

该缺陷已经在Angular v12的后续补丁版本中修复，将@angular-devkit/build-angular升级到12.2.0及以上的v12分支版本即可解决问题，升级命令如下：

ng update @angular/cli@12 @angular/core@12

升级后可保留全局sourceMap: true配置，不会再出现白屏问题。

方案3：临时全量开启sourceMap的兼容处理 #

如果需要同时保留脚本、样式、第三方包的全量sourceMap，可在angular.json的serve配置中关闭dev-server的缓存，避免sourceMap加载不完整阻塞初始化：

"serve": {
  "options": {
    "cache": false,
    "liveReload": true
  }
}

如果项目配置了自定义webpack构建流程，需要确认自定义的样式loader（如sass-loader、less-loader）的sourceMap配置和Angular内置配置对齐，避免配置冲突导致的sourceMap加载异常。

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