升级至Angular 16后构建报错：解构语法无法转换至目标环境

问题原因 #

Angular 16默认切换到Vite作为构建工具，Vite依赖的ESBuild在处理旧版浏览器目标环境时，对部分ES6+解构语法的转换逻辑和原Webpack的Babel处理存在差异。你的目标环境包含Edge 16、Safari 11这类老旧浏览器，它们原生不支持相关解构语法，而当前ESBuild的转换能力无法覆盖该场景，导致构建报错。

解决方案 #

1. 升级目标浏览器版本（推荐） #

若业务允许，调整目标环境为更现代的浏览器版本，适配Vite/ESBuild的支持范围：

• 修改package.json中的browserslist配置，或angular.json内build.options.browserslist字段
• 示例配置：

  "browserslist": [
    "last 2 Chrome versions",
    "last 2 Firefox versions",
    "last 2 Edge versions",
    "last 2 Safari versions"
  ]
  

2. 配置ESBuild强制转换 #

在angular.json的项目build配置中，添加ESBuild的专属配置，明确指定支持解构语法或提高目标版本：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "browser": "src/main.ts",
      "outputPath": "dist",
      "esbuildOptions": {
        "target": ["chrome90", "edge90", "firefox90", "ios14", "safari14"],
        "supported": {
          "destructuring": true
        }
      }
    }
  }
}

如果supported配置不生效，直接提高target到原生支持解构语法的浏览器版本即可。

3. 临时回退到Webpack构建 #

若暂时无法调整目标环境，可切换回原Webpack构建器：

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    // 保留原Webpack相关配置
  }
}

补充说明 #

Angular 16的Vite迁移文档未详细提及这类ES语法转换差异，主要因为Vite默认适配现代浏览器环境。若需兼容老旧浏览器，需手动调整上述配置。

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