Angular 14如何官方支持旧浏览器？相关配置疑问

问题背景 #

默认使用Angular CLI构建的Angular 14应用仅支持约20%的浏览器。修改.browserslistrc配置为> 0.2%, not dead后，理论浏览器覆盖率应提升至90%，但旧设备仍出现「死亡白屏」问题。

原.browserslistrc配置 #

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

修改后的.browserslistrc配置 #

> 0.2%, not dead

核心配置调整方案 #

1. 调整 tsconfig.json 编译目标 #

Angular CLI 14默认的tsconfig.json配置如下：

...
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ],
...

必须修改。当前target设为es2020，编译出的代码包含旧浏览器不支持的语法（如可选链?.、空值合并??），仅修改browserslist无法自动降级语法版本。

推荐两种调整方式：

• 全局降级：直接修改主tsconfig.json，将target改为es6（兼容绝大多数旧浏览器），同步调整module和lib：

  "target": "es6",
  "module": "es2015",
  "lib": [
    "es6",
    "dom"
  ]
  

  若需支持IE11等极旧浏览器，可将target设为es5。
• 差异化打包：保留主tsconfig.json用于现代浏览器，新增tsconfig-es5.json配置旧浏览器兼容版本，在angular.json中配置两个构建目标，实现按需加载。

2. 正确使用 polyfills.ts #

你的理解有部分正确性，补充细节如下：

• Angular框架依赖的核心polyfill（如Zone.js、Angular自身需要的ES特性补丁）会由CLI自动注入，这也是默认polyfills.ts中BROWSER POLYFILLS部分为空的原因。
• 对于Angular不依赖但旧浏览器缺失的ES特性（如Array.prototype.includes、Promise、Object.assign等），需要手动在polyfills.ts中引入对应补丁。推荐使用core-js按需添加：

  // 按需引入单个特性补丁
  import 'core-js/es/promise';
  import 'core-js/es/array/includes';
  
  // 或引入所有必要的ES补丁（适合快速兼容）
  import 'core-js';
  

额外排查要点 #

• 确认构建命令：执行ng build（或ng build --prod）时，CLI会自动读取.browserslistrc和tsconfig配置，若使用自定义构建脚本，确保未覆盖这些配置。
• 锁定旧浏览器版本：若需支持特定极旧浏览器，可在.browserslistrc中明确添加，比如IE 11。
• 查看控制台报错：在旧设备上打开开发者工具，定位具体的语法错误或缺失API，针对性添加polyfill或调整编译目标。

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