首页
学习
活动
专区
圈层
工具
发布

浏览器支持

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 动画的腻子脚本,就要通过下列命令之一来安装它:

代码语言:javascript
代码运行次数:0
复制
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

代码语言:javascript
代码运行次数:0
复制
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 中找不到要使用的腻子脚本,就可以仿照下列模式自行添加它:

  1. 安装 npm 包
  2. 在 polyfills.ts 中 import 这个文件

不使用 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

代码语言:javascript
代码运行次数:0
复制
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 -->

扫码关注腾讯云开发者

领取腾讯云代金券