Angular 15：browserslist配置失效，Safari 11兼容问题求助

问题根源 #

报错TypeError: Xt.flat is not a function本质是Array.prototype.flat未被polyfill——Safari 11不支持ES2019引入的Array.flat()和Array.flatMap() API。虽然你的.browserslistrc包含了Safari 11，但由于使用@angular-builders/custom-webpack构建器，Angular默认的自动polyfill注入逻辑可能被干扰，导致未自动补全该API的兼容代码。

解决方案 #

1. 手动添加单个polyfill（最轻量化） #

无需导入全量core-js，仅在polyfills.ts中添加缺失的API polyfill：

// polyfills.ts
import 'core-js/es/array/flat';
import 'core-js/es/array/flat-map';

这样只会打包这两个小体积的polyfill，避免全量引入导致的体积膨胀。

2. 修复custom-webpack配置的polyfill处理 #

如果你的custom-webpack配置自定义了babel或webpack规则，需要确保它能正确读取.browserslistrc并注入必要polyfill：

• 安装依赖：

  npm install @babel/core @babel/preset-env babel-loader core-js@3 --save-dev
  

• 修改custom-webpack配置文件（如webpack.config.js）：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env', {
                    useBuiltIns: 'usage', // 自动按需注入polyfill
                    corejs: 3, // 指定core-js版本
                    targets: require('browserslist')() // 读取.browserslistrc配置
                  }]
                ]
              }
            }
          ]
        }
      ]
    }
  };
  

3. 修正.browserslistrc规则 #

将现有规则调整为更明确的写法，确保Safari 11被正确识别：

supports es6-module
not dead
safari >= 11
ios_saf >= 11
not edge <= 17
not safari tp

运行npx browserslist验证输出，确认包含safari 11。

4. 检查Angular build配置 #

在angular.json的build配置中，确保：

• polyfills字段指向正确的polyfills.ts路径
• 未禁用vendorChunk（该选项会影响polyfill的打包逻辑）

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