在使用 Angular 的过程中，我们可能会遇到一些浏览器兼容性的问题，这时候我们需要使用一些 polyfill 来解决这些问题。angular-polyfills 就是一个非常好用的 polyfill 库，它能够提供常用的浏览器 polyfill，使我们能够更轻松地编写跨浏览器兼容性的代码。
安装
使用 npm 安装 angular-polyfills 很简单，只需要执行以下命令即可：
npm install angular-polyfills --save
使用
安装完成后，我们需要将 angular-polyfills 引入到我们的代码中。这可以通过在 app.module.ts 中导入它来完成：
import 'angular-polyfills';
这个导入必须在所有其他导入之前进行。现在，我们就可以在项目中使用一些浏览器不支持的特性了。例如，我们可以在组件中使用 Object.assign() 方法：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- --------- --- --- --- -- ------ ----- ------------ - --- - ----------------- - ----- ------ --- -
如果我们运行程序在一些不支持 Object.assign() 方法的浏览器上，我们会遇到一个错误。但是，我们现在已经导入了 angular-polyfills ，我们可以在不支持 Object.assign() 的浏览器上使用它了。
示例
接下来，我们看一个例子，如何让代码在不支持 Promise API 的浏览器（比如 IE 11）上正常运行。我们在一个组件中创建一个 Promise，然后在它上面进行一些操作：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- --- ------ ---
--
------ ----- ------------ -
------ - ---
---------- -
----- ------- - --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
----------------- -- -
----------- - -----
---
-
-在一些支持 Promise API 的浏览器上，当我们运行程序时，我们会在 2 秒后看到“done”这个字符串。但是在不支持 Promise API 的浏览器上，会看到一个错误。这时候我们可以使用 angular-polyfills 来解决这个问题：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- --------------------
------------
--------- -----------
--------- --- ------ ---
--
------ ----- ------------ -
------ - ---
------------- -
--------------------
-
---------- -
----- ------- - --- ----------------- ------- -- -
------------- -- -
----------------
-- ------
---
----------------- -- -
----------- - -----
---
-
-这里我们使用了 angular-polyfills 中的 polyfill() 方法，并传入了需要 polyfill 的类型。我们将它传入到构造函数中，这样我们可以在组件初始化时加入 polyfill。
现在，我们可以在不支持 Promise API 的浏览器上正常运行代码了。
使用场景
使用 angular-polyfills 可以方便地解决跨浏览器兼容性的问题，在以下几种情况下会非常有用：
- 当我们使用 Angular 中不支持的 API 时，比如 Object.assign()、Promise、fetch 等。
- 当我们需要支持旧版本浏览器时，比如 IE 11 等。
总之，angular-polyfills 是一个非常好用的 polyfill 库，可以帮助我们在 Angular 中轻松地使用一些浏览器不支持的特性，同时也能很好地增强我们的代码的跨浏览器兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662d81e8991b448e2092