升级到Angular 12后构建抛出Optimization error优化错误如何解决？

云原生阿岚

2026-9-30

问题根因

这个错误是@ampproject/remapping库低版本的已知bug，该库用于构建时合并sourcemap，无法识别webpack生成的带!分隔符的内联loader路径类sourcemap地址，你打印的入参里的多段!分隔路径就是触发解析失败的直接原因，关闭脚本优化时因为跳过了sourcemap合并步骤所以不会触发错误。

可行解决方案

方案1：强制升级兼容版本的`@ampproject/remapping`

如果你的项目用yarn作为包管理工具，直接在package.json中添加resolutions配置：

"resolutions": {
  "@ampproject/remapping": "^2.1.2"
}

添加后重新执行yarn install安装依赖后再构建即可。
如果用npm，可安装npm-force-resolutions工具后执行相同配置生效。

方案2：关闭第三方依赖的sourcemap生成

修改angular.json中生产构建的sourcemap配置，关闭vendor包的sourcemap处理，避免触发路径解析错误：

{
  "projects": {
    "你的项目名": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "sourceMap": {
                "scripts": true,
                "styles": true,
                "vendor": false,
                "hidden": false
              }
            }
          }
        }
      }
    }
  }
}

该配置只会关闭第三方依赖的sourcemap生成，不影响业务代码的sourcemap调试能力。