Angular 15中Browserslist未生效，无法兼容Android Chrome 75问询

问题核心 #

browserslist 可以扩大支持范围，但需要配合 Angular/TypeScript 的转译配置才能生效。你遇到的问题是默认配置下，TypeScript 未将 ES2020 特性（可选链）转译为 Android Chrome 75 支持的语法。

为什么配置后仍有可选链？ #

Angular 15 默认的tsconfig.json中target设置为ES2020，而可选链是 ES2020 的特性——TypeScript 只会转译低于target版本的语法，因此不会处理可选链。同时默认构建流程未启用 Babel 基于 browserslist 的二次转译，导致语法未降级。

解决步骤 #

1. 修正 browserslist 配置 #

确保.browserslistrc仅保留目标浏览器规则（清理默认的多浏览器规则）：

ChromeAndroid >= 75

可通过以下命令验证配置匹配的浏览器：

npx browserslist

输出应包含chromeandroid 75。

2. 调整 TypeScript 转译目标 #

修改tsconfig.json的compilerOptions，将target降至 ES2018（或更低，如 ES5），强制 TypeScript 转译可选链等 ES2020 特性：

{
  "compilerOptions": {
    "target": "ES2018",
    "lib": ["ES2018", "dom"],
    // 其余配置保持不变
  }
}

3. 确认 Polyfills 配置 #

确保src/polyfills.ts引入了必要的兼容库，Angular 15 默认已包含zone.js，如需补充语法 polyfill 可添加：

import 'core-js/es';
import 'zone.js';

4. 重新构建项目 #

npm run build

此时构建后的 JS 代码应已移除可选链操作符，替换为兼容 Android Chrome 75 的语法。

额外说明 #

• Angular 官方支持的浏览器列表是他们测试验证的范围，不代表通过配置无法支持更旧的浏览器。
• 若需要更精细化的转译控制（比如保留高版本语法让 Babel 处理），可使用@angular-builders/custom-webpack集成 Babel，基于 browserslist 自动降级语法。

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