浏览器支持link

Browser supportlink

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

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

腻子脚本 (polyfill)link

Polyfillslink

Angular 构建于 Web 平台的最新标准之上。 要支持这么多浏览器是一个不小的挑战，因为它们不支持现代浏览器的所有特性。

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.

你可以通过加载腻子脚本("polyfills")来为想要支持的浏览器弥补这些特性。 下表 列出了可能用到的大多数腻子脚本。

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.

启用腻子脚本link

Enabling polyfillslink

Angular CLI 的用户可以通过自动创建的 src/polyfills.ts 文件来启用这些腻子脚本。

Angular CLI users enable polyfills through the src/polyfills.ts file that the CLI created with your project.

这个文件把强制的和很多可选的腻子脚本组织成 JavaScript 的 import 语句。

This file incorporates the mandatory and many of the optional polyfills as JavaScript import statements.

强制性 腻子脚本（如 zone.js）的 npm 包在创建项目时就已经自动安装了，相应的 import 语句也都加好了。你一般不用动它们。

The npm packages for the mandatory polyfills (such as zone.js) were installed automatically for you when you created your project and their corresponding import statements are ready to go. You probably won't touch these.

但是如果要用一个可选的腻子脚本，就要通过 npm 或 yarn 来安装它们的 npm 包了。 比如，如果你需要 web 动画的腻子脚本，就要通过下列命令之一来安装它：

But if you need an optional polyfill, you'll have to install its npm package. For example, if you need the web animations polyfill, you could install it with npm, using the following command (or the yarn equivalent):

      
        content_copy
      
      # note that the web-animations-js polyfill is only here as an example

# it isn't a strict requirement of Angular anymore (more below)

npm install --save web-animations-js
    

然后打开 polyfills.ts 文件，并反注释对应的 import 语句，就像这样：

Then open the polyfills.ts file and un-comment the corresponding import statement as in the following example:

      
        content_copy
      
      /**

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

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

如果在 polyfills.ts 中找不到要使用的腻子脚本，就可以仿照下列模式自行添加它：

If you can't find the polyfill you want in polyfills.ts, add it yourself, following the same pattern:

1. 安装 npm 包

   install the npm package

2. 在 polyfills.ts 中 import 这个文件

   import the file in polyfills.ts

强制性腻子脚本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.

例如，动画库依赖于标准的 web 动画 API，目前它只能用在 Chrome 和 Firefox 上。 （注意，在 Angular 中，只有当用到了 AnimationBuilder 时，对 web-animations-js 的依赖才是必要的。）

For example, the animations library relies on the standard web animation API, which is only available in Chrome and Firefox today. (note that the dependency of web-animations-js in Angular is only necessary if AnimationBuilder is used.)

下列特性可能需要更多腻子脚本：

Here are the features which may require additional polyfills:

建议的腻子脚本link

Suggested polyfillslink

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

Below are the polyfills which 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, you should add your polyfill scripts directly to the host web page (index.html), perhaps like this.

      
        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__BLACK_LISTED_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/dist/zone.js"></script>

<!-- application polyfills -->