Angular项目中Object.fromEntries在旧版Chrome(v63)无法运行的解决办法

问题 #

我有一个基于以下规格开发的Angular应用：

> ng version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 14.0.7
Node: 16.17.0
Package Manager: npm 8.15.0
OS: win32 x64

Angular: 14.0.7
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.11
@angular-devkit/build-angular   14.2.11
@angular-devkit/core            14.2.11
@angular-devkit/schematics      14.0.7
@angular/cdk                    14.0.6
@schematics/angular             14.0.7
rxjs                            7.4.0
typescript                      4.7.4

该应用在新版浏览器中运行正常，但部署到IIS后，适配旧版Chrome（版本63）时出现以下错误：

ERROR TypeError: Object.fromEntries is not a function

已知Object.fromEntries仅支持Chrome 73及以上版本，目前仅在项目的C:\My Project\.angular\cache\14.2.11\babel-webpack\c8feead8cb3e88b701a0507c0d4f53a3.json缓存文件中发现该方法的引用，代码中未直接使用。请问该如何处理？是否可以通过polyfill解决，若可以在Angular中该如何配置？降级相关依赖包是否可行？

解决方案 #

方法一：添加Object.fromEntries的Polyfill #

这是最直接的解决方式，步骤如下：

1. 安装对应的polyfill包
   在项目根目录执行命令：

   npm install object.fromentries --save
   

2. 在Angular的polyfills.ts文件中引入该polyfill
   打开src/polyfills.ts，添加以下代码：

   import 'object.fromentries';
   // 若TypeScript报错，补充类型声明
   import type 'object.fromentries';
   

   若项目无单独的polyfills.ts（Angular 12+默认可能不生成），可在angular.json的build.options.polyfills字段指定该文件路径，或直接在main.ts顶部引入polyfill。
3. 配置浏览器目标（可选但建议）
   确保tsconfig.json中的target设置为es2017或更低，同时在angular.json的build.options.browserslist中明确包含旧版Chrome：

   "browserslist": [
     "Chrome >= 63",
     "last 2 versions",
     "not dead"
   ]
   

   这样Angular构建工具会自动根据目标浏览器调整编译输出，减少不必要的现代语法。

方法二：检查并降级依赖包 #

由于fromEntries出现在babel-webpack的缓存文件中，可能是某个依赖包编译时使用了该方法，可按以下步骤处理：

1. 排查项目依赖，找出使用Object.fromEntries的包
   通过npm ls结合搜索、查看依赖包源码/文档，确认是否存在兼容旧浏览器的版本分支。
2. 降级到兼容Chrome 63的版本
   比如当前@angular-devkit/build-angular版本（14.2.11）与Angular核心版本（14.0.7）有差异，可尝试降级到匹配版本：

   npm install @angular-devkit/build-angular@14.0.7 --save-dev
   

   降级后清理缓存并重新构建：

   ng cache clean
   ng build --prod
   

方法三：手动添加fromEntries实现（临时应急） #

如果上述方法无法生效，可在全局作用域手动补充兼容代码，无需额外安装包：
在polyfills.ts或main.ts中添加：

if (!Object.fromEntries) {
  Object.fromEntries = function(entries) {
    return entries.reduce((obj, [key, value]) => {
      obj[key] = value;
      return obj;
    }, {});
  };
}

这种方式需要自行维护兼容代码，仅适合临时场景。

内容的提问来源于stack exchange，提问作者Uzair A.