填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

瀏覽器支援

Browser support

Angular 支援大多數常用瀏覽器,包括下列版本:

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

瀏覽器

Browser

支援的版本

Supported versions

Chrome

最新

latest

Firefox

最新版以及擴充套件支援版本 (ESR)

latest and extended support release (ESR)

Edge

最近的兩個主版本

2 most recent major versions

IE

11
*已棄用,參見 棄用指南

11
*deprecated, see the deprecations guide

Safari

最近的兩個主版本

2 most recent major versions

iOS

最近的兩個主版本

2 most recent major versions

AndroidQ (10.0), Pie (9.0), Oreo (8.0), Nougat (7.0)

Angular 在持續整合過程中,對每一個提交都會使用 SauceLabsBrowserstack 在上述所有瀏覽器上執行單元測試。

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

Polyfill指令碼 (polyfill)

Polyfills

Angular 構建於 Web 平臺的最新標準之上。 要支援這麼多瀏覽器是一個不小的挑戰,因為它們不支援現代瀏覽器的所有特性。 你可以透過載入Polyfill指令碼("polyfills")來為想要支援的瀏覽器彌補這些特性。 下表 列出了可能用到的大多數Polyfill指令碼。

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.

這些建議的Polyfill指令碼是執行完整 Angular 應用所需的。 你可能還會需要另一些的Polyfill指令碼來支援沒有出現在此列表中的哪些特性。 注意,這些Polyfill指令碼並沒有神奇的魔力來把老舊、慢速的瀏覽器變成現代、快速的瀏覽器,它只是填充了 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 專案中啟用Polyfill指令碼

Enabling polyfills with CLI projects

Angular CLI 提供了對Polyfill指令碼的支援。如果未使用 CLI 建立專案,請參閱針對非 CLI 使用者的Polyfill指令碼說明

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 配置檔案。該檔案包含許多強制性和可選Polyfill指令碼的 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.

  • 如果需要可選的Polyfill指令碼,則必須安裝其 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 動畫Polyfill指令碼,則可以使用以下命令來透過 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
    

然後你還要在 src/polyfills.ts 檔案中新增匯入語句。 對於大多數Polyfill指令碼,你可以直接在此檔案中反註釋對應的 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.

src/polyfills.ts
      
      /**

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

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

如果 polyfills.ts 檔案中沒有你想要的Polyfill指令碼,請手動新增 import 語句。

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

強制性Polyfill指令碼

Mandatory polyfills

下表中的Polyfill指令碼是每個瀏覽器中執行 Angular 應用時要用到哪些:

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

瀏覽器(桌面&移動端)

Browsers (Desktop & Mobile)

所需的Polyfill指令碼

Polyfills Required

Chrome, Firefox, Edge,
Safari, Android, IE 11
ES2015

可選瀏覽器特性的Polyfill指令碼

Optional browser features to polyfill

有些 Angular 特性可能需要額外的Polyfill指令碼。

Some features of Angular may require additional polyfills.

特性

Feature

Polyfill指令碼

Polyfill

瀏覽器(桌面&移動端)

Browsers (Desktop & Mobile)

AnimationBuilder(支援標準動畫不需要Polyfill指令碼)

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

在 SVG 元素上的 NgClass

NgClass on SVG elements

classListIE 11

當[路由器](guide/router)使用[基於 hash 的路由](guide/router#location-strategy)時。

Router when using hash-based routing

ES7/arrayIE 11

建議的Polyfill指令碼

Suggested polyfills

下列Polyfill指令碼是用來測試框架本身的。它們是應用程式的優質起點。

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

Polyfill指令碼

Polyfill

授權方式

License

大小*

Size*

ES7/arrayMIT0.1KB
ES2015MIT27.4KB
classListPublic domain1KB

Web 動畫

Web Animations

Apache14.8KB

* 這裡的資料都按最小化並且 gzip 壓縮後的版本算,是由closure compiler計算出的。

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

非 CLI 的使用者的Polyfill指令碼

Polyfills for non-CLI users

如果你不使用 CLI,就要直接把Polyfill指令碼新增到宿主頁(index.html)中,就像這樣:

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

比如:

For example:

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/bundles/zone.umd.js"></script>
<!-- application polyfills -->