填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

浏览器支持

Browser support

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

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

浏览器

Browser

支持的版本

Supported versions

Chrome

最新版

latest

Firefox

最新版

latest

Edge

最近的两个主版本

2 most recent major versions

IE

11, 10, 9(不支持“兼容视图”模式)

11, 10, 9 ("compatibility view" mode not supported)

IE Mobile

11

Safari

最近的两个主版本

2 most recent major versions

iOS

最近的两个主版本

2 most recent major versions

Android

Nougat (7.0), Marshmallow (6.0), Lollipop (5.0, 5.1), KitKat (4.4)

Angular 在持续集成过程中,对每一个提交都会使用 SauceLabsBrowserstack 在上述所有浏览器上执行单元测试。

Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, using SauceLabs and Browserstack.

腻子脚本 (polyfill)

Polyfills

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 应用所需的。 你可能还会需要另一些的腻子脚本来支持没有出现在此列表中的哪些特性。 注意,这些腻子脚本并没有神奇的魔力来把老旧、慢速的浏览器变成现代、快速的浏览器,它只是填充了 API。

The suggested polyfills are the ones that run full Angular applications. You may need additional polyfills to support features not covered by this list. Note that polyfills cannot magically transform an old, slow browser into a modern, fast one.

在 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 项目中启用腻子脚本

Enabling polyfills with CLI projects

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):

# install the optional web animations polyfill npm install --save web-animations-js
      
      # 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.

/** * 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`.
src/polyfills.ts
      
      /**

* 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 文件中没有你想要的腻子脚本,请手动添加 import 语句。

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

强制性腻子脚本

Mandatory polyfills

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

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

浏览器(桌面和移动)

Browsers (Desktop & Mobile)

需要的腻子脚本

Polyfills Required

Chrome, Firefox, Edge,
Safari, Android, IE 10+

ES2015

IE9

ES2015
classList

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

Optional browser features to polyfill

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

Some features of Angular may require additional polyfills.

特性

Feature

腻子脚本

Polyfill

浏览器(桌面和移动)

Browsers (Desktop & Mobile)

AnimationBuilder。 (支持标准动画不需要腻子脚本。)

AnimationBuilder. (Standard animation support does not require polyfills.)

Web 动画

Web Animations

如果用到了 AnimationBuilder,还要启用 IE/Edge 和 Safari 的 scrubbing(擦除)支持 (Chrome 和 Firefox 对此提供了原生支持)

If AnimationBuilder is used, enables scrubbing support for IE/Edge and Safari. (Chrome and Firefox support this natively).

NgClass

在 SVG 元素上应用时

on SVG elements

classList

IE10, IE11

Http

Http 发送和接收二进制数据时

when sending and receiving binary data

Typed Array

Blob

FormData

IE 9

当使用基于 hash 的路由时。

Router when using hash-based routing

ES7/array

IE 11

建议的腻子脚本

Suggested polyfills

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

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

腻子脚本

Polyfill

授权方式

License

大小*

Size*

ES7/array

MIT0.1KB

ES2015

MIT

27.4KB

classList

公共域

Public domain

1KB

Intl

MIT / Unicode license

13.5KB

Web Animations

Apache

14.8KB

Typed Array

MIT

4KB

Blob

MIT

1.3KB

FormData

MIT

0.4KB

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

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

非 CLI 的用户的腻子脚本

Polyfills for non-CLI users

如果你不使用 CLI,就要直接把腻子脚本添加到宿主页(index.html)中,就像这样:

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

比如:

For example:

<!-- 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/dist/zone.js"></script> <!-- application polyfills -->
src/index.html
      
      <!-- 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/dist/zone.js"></script>

<!-- application polyfills -->