Angular 14 类Webpack+Babel的Polyfill加载机制及replaceAll兼容问题

问题原因 #

Angular CLI 的构建工具 @angular-devkit/build-angular 对语法转换和 API 兼容处理是分开的：

• 箭头函数这类语法层面的转换，由 TypeScript 编译器直接处理，只要你的 .browserslistrc 和 tsconfig.json 目标版本匹配，就能自动完成。
• 而 String.prototype.replaceAll 属于API 层面的新增特性（Chrome 85 才原生支持，你的目标版本 Chrome 70 不兼容），TypeScript 不会自动为这类 API 注入 polyfill，需要手动配置或启用按需导入。

解决方案 #

方案1：手动导入单个 API Polyfill #

直接在 src/polyfills.ts 文件中添加对应 polyfill 的导入语句：

// 仅导入 String.replaceAll 的 polyfill
import 'core-js/es/string/replace-all';

构建后，这个 polyfill 会被打包进产物，针对 Chrome 70 生效。

方案2：配置 Core-js 按需自动导入（推荐，适配所有 API 兼容） #

这种方式会根据你的 .browserslistrc 配置，自动注入目标浏览器缺失的所有 API polyfill：

1. 确保安装了 core-js@3.x（Angular 14 默认依赖此版本，若缺失可执行 npm install core-js@3 --save）
2. 修改 tsconfig.json 的 compilerOptions：

   {
     "compilerOptions": {
       "target": "ES2020", // 匹配目标浏览器支持的最高 ES 版本
       "lib": ["ES2020", "DOM"], // 引入对应 ES 标准库和 DOM 库
       "useDefineForClassFields": true // Angular 14 推荐配置
     }
   }
   

3. 更新 src/polyfills.ts 的导入语句，替换原有 core-js 相关导入：

   // 自动导入目标浏览器缺失的所有稳定版 API polyfill
   import 'core-js/stable';
   // 若使用 async/await 等异步语法，需保留此导入
   import 'regenerator-runtime/runtime';
   

验证配置有效性 #

1. 运行 npx browserslist 命令，确认输出列表中包含 chrome 70，确保你的 browserslist 配置生效。
2. 重新执行 ng build，查看 dist 目录下的 polyfill 相关 chunk，会包含 replaceAll 的兼容代码。

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