Angular关闭JavaScript压缩后出现两类错误的排查求助

错误1：Source Map请求404问题 #

• 原因：关闭optimization后，Angular不会默认生成第三方依赖（如ngx-echarts）的source map文件，浏览器尝试加载ngx-echarts.mjs.map时找不到资源，导致404报错。
• 解决&获取未压缩脚本的方法：
  • 开启全量source map生成：在angular.json的projects > project-name > architect > build > options中添加配置：

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

    重新构建后，会生成包含第三方依赖的source map，浏览器能正确映射到未压缩的原始脚本。
  • 直接查看本地源码：前往项目的node_modules/ngx-echarts目录，直接读取未压缩的原始源码文件。
  • 禁用第三方source map加载：在浏览器开发者工具设置中，关闭JavaScript source map的自动加载（如果不需要调试第三方库），即可消除报错。

错误2：ctx.formData仅关闭压缩时触发undefined错误 #

• 原因：开启压缩时，Angular使用的Terser压缩工具会对代码做优化，可能通过变量提升、路径裁剪等方式掩盖了formData未初始化的问题；关闭压缩后，代码保留原始执行逻辑，当模板或组件尝试访问未初始化的formData时，就会直接抛出类型错误。
• 排查修复方向：
  • 检查组件中formData的初始化逻辑，确保在模板渲染前完成初始化，比如在组件类中提前声明并赋值：

    formData: FormData = new FormData();
    

  • 若formData是异步加载的，需在模板中使用安全导航操作符?.避免直接访问undefined属性，比如：

    {{ formData?.username }}
    

  • 根据报错的调用栈，直接定位到对应组件的代码行，查看formData的使用场景，确认是否存在未初始化就调用的情况。

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