浏览器支持link

Browser supportlink

Angular 支持大多数常用浏览器，包括下列版本：

Angular supports most recent browsers. This includes the following specific versions:

腻子脚本 (polyfill)link

Polyfillslink

Angular 构建于 Web 平台的最新标准之上。 要支持这么多浏览器是一个不小的挑战，因为它们不支持现代浏览器的所有特性。 你可以通过加载腻子脚本("polyfills")来为想要支持的浏览器弥补这些特性。 下表 列出了可能用到的大多数腻子脚本。

Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers. You compensate by loading polyfill scripts ("polyfills") for the browsers that you must support. The table below identifies most of the polyfills you might need.

在 Angular CLI 版本 8 和更高版本中，应用程序是使用差异化加载的方式构建的，差异化加载是一种策略，CLI 会构建两个单独的捆绑包作为已部署应用程序的一部分。

In Angular CLI version 8 and higher, applications are built using differential loading, a strategy where the CLI builds two separate bundles as part of your deployed application.

• 第一个捆绑包中包含现代 ES2015 语法，利用了现代浏览器中的内置支持，减少了 polyfill 的发布，并减小了捆绑包的大小。

  The first bundle contains modern ES2015 syntax, takes advantage of built-in support in modern browsers, ships less polyfills, and results in a smaller bundle size.

• 第二个捆绑包中包含旧 ES5 语法中的代码以及所有必要的 polyfill。这会导致更大的捆绑包大小，但支持较旧的浏览器。

  The second bundle contains code in the old ES5 syntax, along with all necessary polyfills. This results in a larger bundle size, but supports older browsers.

通过此策略，你可以继续构建 Web 应用程序以支持多个浏览器，但仅加载当前浏览器所需的必要代码。关于此工作原理的更多信息，请参阅《部署指南》中的“差异化加载 ”。

This strategy allows you to continue to build your web application to support multiple browsers, but only load the necessary code that the browser needs. For more information about how this works, see Differential Loading in the Deployment guide.

在 CLI 项目中启用腻子脚本link

Enabling polyfills with CLI projectslink

Angular CLI 提供了对腻子脚本的支持。如果未使用 CLI 创建项目，请参阅针对非 CLI 用户的腻子脚本说明。

The Angular CLI provides support for polyfills. If you are not using the CLI to create your projects, see Polyfill instructions for non-CLI users.

使用 ng new 命令创建项目时，会在项目文件夹中创建一个 src/polyfills.ts 配置文件。该文件包含许多强制性和可选腻子脚本的 JavaScript import 语句。

When you create a project with the ng new command, a src/polyfills.ts configuration file is created as part of your project folder. This file incorporates the mandatory and many of the optional polyfills as JavaScript import statements.

• 使用 ng new 创建项目时，会自动为你安装强制性 zone.js 的 npm 捆绑包（例如 zone.js ），并且它对应的 import 语句已在 src/polyfills.ts 配置文件中启用。

  The npm packages for the mandatory polyfills (such as zone.js) are installed automatically for you when you create your project with ng new, and their corresponding import statements are already enabled in the src/polyfills.ts configuration file.

• 如果需要可选的腻子脚本，则必须安装其 npm 捆绑包，然后取消注释或在 src/polyfills.ts 配置文件中创建相应的 import 语句。

  If you need an optional polyfill, you must install its npm package, then uncomment or create the corresponding import statement in the src/polyfills.ts configuration file.

比如，如果需要可选的 Web 动画腻子脚本，则可以使用以下命令来通过 npm（或等效的 yarn ）安装它：

For example, if you need the optional web animations polyfill, you could install it with npm, using the following command (or the yarn equivalent):

      
        content_copy
      
      # install the optional web animations polyfill
npm install --save web-animations-js
    

然后你还要在 src/polyfills.ts 文件中添加导入语句。 对于大多数腻子脚本，你可以直接在此文件中反注释对应的 import 语句，如下所示。

You can then add the import statement in the src/polyfills.ts file. For many polyfills, you can simply un-comment the corresponding import statement in the file, as in the following example.

      
        content_copy
      
      /**

* Required to support Web Animations `@angular/platform-browser/animations`.

* Needed for: All but Chrome, Firefox and Opera. https://caniuse.com/web-animation
**/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
    

如果 polyfills.ts 文件中没有你想要的腻子脚本，请手动添加 import 语句。

If the polyfill you want is not already in polyfills.ts file, add the import statement by hand.

强制性腻子脚本link

Mandatory polyfillslink

下表中的腻子脚本是每个浏览器中运行 Angular 应用时要用到哪些：

These are the polyfills required to run an Angular application on each supported browser:

可选浏览器特性的腻子脚本link

Optional browser features to polyfilllink

有些 Angular 特性可能需要额外的腻子脚本。

Some features of Angular may require additional polyfills.

建议的腻子脚本link

Suggested polyfillslink

下列腻子脚本是用来测试框架本身的。它们是应用程序的优质起点。

The following polyfills are used to test the framework itself. They are a good starting point for an application.

* 这里的数据都按最小化并且 gzip 压缩后的版本算，是由closure compiler计算出的。

* Figures are for minified and gzipped code, computed with the closure compiler.

非 CLI 的用户的腻子脚本link

Polyfills for non-CLI userslink

如果你不使用 CLI，就要直接把腻子脚本添加到宿主页（index.html）中，就像这样：

If you are not using the CLI, add your polyfill scripts directly to the host web page (index.html).

比如：

For example:

      
        content_copy
      
      <!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>
<script>
  /**

   * you can configure some zone flags which can disable zone interception for some

   * asynchronous activities to improve startup performance - use these options only

   * if you know what you are doing as it could result in hard to trace down bugs..
   */
  // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
  // __Zone_disable_on_property = true; // disable patch onProperty such as onclick
  // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  /*

   * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js

   * with the following flag, it will bypass `zone.js` patch for IE/Edge
   */
  // __Zone_enable_cross_context_check = true;
</script>
<!-- zone.js required by Angular -->
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
<!-- application polyfills -->