Angular 浏览器支持

浏览器支持

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

浏览器	支持的版本
Chrome	最新
Firefox	最新版以及扩展支持版本 (ESR)
Edge	最近的两个主版本
Safari	最近的两个主版本
iOS	最近的两个主版本
Android	最近的两个主版本

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

腻子脚本 (polyfill)

Angular 构建于 Web 平台的最新标准之上。要支持这么多浏览器是一个不小的挑战，因为它们不支持现代浏览器的所有特性。你可以通过加载腻子脚本(“polyfills”)来为想要支持的浏览器弥补这些特性。下面讲解了如何将腻子脚本包含到你的项目中。

这些建议的腻子脚本是运行完整 Angular 应用所需的。 你可能还会需要另一些的腻子脚本来支持没有出现在此列表中的哪些特性。

注意：

这些腻子脚本并没有神奇的魔力来把老旧、慢速的浏览器变成现代、快速的浏览器。

在 CLI 项目中启用腻子脚本

​Angular CLI​ 提供了对腻子脚本的支持。

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

• 使用 ​ng new​ 创建项目时，会自动为你安装一些强制性腻子脚本（比如 ​zone.js​），并且它对应的 ​import ​语句已在 ​src/polyfills.ts​ 配置文件中启用。
• 如果你需要一个可选的填充库，就必须安装它们的 npm 包，然后在 ​src/polyfills.ts​ 文件中反注释或创建一个对应的导入语句。

非 CLI 的用户的腻子脚本

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

比如：

<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.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 Edge developer tools, the addEventListener will also be wrapped by zone.js
   * with the following flag, it will bypass `zone.js` patch for 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 -->