浏览器支持
浏览器支持
Angular 支持大多数常用浏览器，包括下列版本：
| 浏览器 | 支持的版本 |
|---|---|
| Chrome | 最新版 |
| Firefox | 最新版 |
| Edge | 最近的两个主版本 |
| IE | 11109 |
| IE Mobile | 11 |
| Safari | 最近的两个主版本 |
| iOS | 最近的两个主版本 |
| Android | Nougat (7.0)Marshmallow (6.0)Lollipop (5.0, 5.1)KitKat (4.4) |
Angular 在持续集成过程中，对每一个提交都会使用 SauceLabs 和 Browserstack 在上述所有浏览器上执行单元测试。
腻子脚本 (polyfill)
Angular 构建于 Web 平台的最新标准之上。 要支持这么多浏览器是一个不小的挑战，因为它们不支持现代浏览器的所有特性。
你可以通过加载腻子脚本("polyfills")来为想要支持的浏览器弥补这些特性。 下表 列出了可能用到的大多数腻子脚本。
这些建议的腻子脚本是运行完整 Angular 应用所需的。 你可能还会需要另一些的腻子脚本来支持没有出现在此列表中的哪些特性。 注意，这些腻子脚本并没有神奇的魔力来把老旧、慢速的浏览器变成现代、快速的浏览器，它只是填充了 API。
启用腻子脚本
Angular CLI 的用户可以通过自动创建的 src/polyfills.ts 文件来启用这些腻子脚本。
这个文件把强制的和很多可选的腻子脚本组织成 JavaScript 的 import 语句。
强制性 腻子脚本（如 zone.js）的 npm 包在创建项目时就已经自动安装了，相应的 import 语句也都加好了。你一般不用动它们。
但是如果要用一个可选的腻子脚本，就要通过 npm 或 yarn 来安装它们的 npm 包了。 比如，如果你需要 web 动画的腻子脚本，就要通过下列命令之一来安装它：
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 语句，就像这样：
src/polyfills.ts
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 中找不到要使用的腻子脚本，就可以仿照下列模式自行添加它：
- 安装 npm 包
不使用 CLI 的用户可以遵循下列步骤自行操作。
强制性腻子脚本
下表中的腻子脚本是每个浏览器都要用到的：
| 浏览器（桌面和移动） | 需要的腻子脚本 |
|---|---|
| Chrome, Firefox, Edge, Safari 9+ | ES7/reflect (仅 JIT) |
| Safari 7 & 8, IE10 & 11, Android 4.1+ | ES6 |
| IE9 | ES6classList |
可选浏览器特性的腻子脚本
有些 Angular 特性可能需要额外的腻子脚本。
例如，动画库依赖于标准的 web 动画 API，目前它只在 Chrome 和 Firefox 上可用。你可能需要一个腻子脚本来在其它浏览器上使用动画功能。
下列特性可能需要更多腻子脚本：
| 特性 | 腻子脚本 | 浏览器（桌面和移动） |
|---|---|---|
| JIT 编译。需要 reflect 来提供元数据。 | ES7/reflect | 默认对目前的所有浏览器都启用了。如果总是使用 AOT 模式，并且只使用 Angular 自带的装饰器，那么可以移除它。 |
| 动画 只有在应用中用到了 Animation Builder 时才需要；Angular 标准的动画支持是不需要任何腻子脚本的（截至 NG6）。 | Web 动画 | 如果使用了 AnimationBuilder，那么腻子脚本将为 IE/Edge 和 Safari 启用擦除（scrubbing）支持（Chrome 和 Firefox 原生支持此特性） |
| 如果你使用下列已废弃的 i18n 管道：date,currency,decimal,percent | Intl API | 除了 Chrome、Firefox、Edge、IE11 和 Safari 10 外的所有浏览器 |
| NgClass在 SVG 元素上应用时 | classList | IE10, IE11 |
| Http用 Http 发送和接收二进制数据时 | Typed ArrayBlobFormData | IE 9 |
建议的腻子脚本
下表中是用来测试框架本身的腻子脚本，它们是应用程序的优质起点。
| 腻子脚本 | 授权方式 | 大小* |
|---|---|---|
| ES7/reflect | MIT | 0.5KB |
| ES6 | MIT | 27.4KB |
| classList | 公共域 | 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计算出的。
非 CLI 的用户的腻子脚本
如果你不使用 CLI，就要直接把腻子脚本添加到宿主页（index.html）中，就像这样：
src/index.html
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 -->
