Angular 10升级至12后控制台日志加密，无法定位错误位置求助

将Angular从10版本升级到12版本后，启动应用时控制台抛出以下错误，但日志指向的是编译后混淆的JS文件，没法直接定位错误来源，怎么精准找到问题出在哪？

ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'name')
TypeError: Cannot read properties of null (reading 'name')
    at main.js:1:165605
    at Object._C (main.js:1:165676)
    at template (982.js:1:165355)
    at U_ (main.js:1:110880)
    at vc (main.js:1:109020)
    at Ec (main.js:1:117150)
    at main.js:1:109221
    at vc (main.js:1:109232)
    at Hs.create (main.js:1:162762)
    at Ep.createComponent (main.js:1:158194)
    at X (polyfills.js:1:17687)
    at X (polyfills.js:1:17222)
    at polyfills.js:1:18528
    at v.invokeTask (polyfills.js:1:8270)
    at Object.onInvokeTask (main.js:1:176525)
    at v.invokeTask (polyfills.js:1:8191)
    at v.runTask (polyfills.js:1:3329)
    at A (polyfills.js:1:10654)

• 开起源映射直接看源码行号
  打开angular.json，找到architect.build.configurations.production（或者你当前用的构建配置），把sourceMap设为true，重新构建项目。这样控制台的错误栈会直接指向你的TypeScript原始文件和具体行号，不用再看混淆后的JS代码。

• 用Angular DevTools抓组件状态
  装个Chrome的Angular DevTools扩展，启动应用后打开DevTools的Angular面板，查看组件树、变更检测情况，或者在错误触发时检查组件的属性，找到哪个对象是null却被读取了name属性。

• 切换到开发环境复现
  别直接用生产构建启动，改用ng serve跑开发环境——开发环境默认不会混淆代码，错误日志直接显示原始文件路径和行号，定位起来快很多。

• 排查模板里的name引用
  错误栈里有template相关调用，说明问题出在模板渲染阶段。重点检查所有模板里用到xxx.name的地方，给这些地方临时加上空值保护（比如{{ obj?.name }}），逐个排查去掉保护后触发错误的位置，就是问题所在。

• 浏览器断点追踪变量
  打开浏览器控制台，点击错误栈里的main.js:1:165605跳转到对应代码行，设置断点后刷新页面。触发错误时查看当前作用域的变量，找到哪个变量是null，再反向追踪到对应的原始代码。

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