Scribd
Upload
52 views

Browser Support: Polyfills

This document discusses browser support and polyfills for Angular. It provides tables listing the browser versions Angular supports and optional features that may require polyfills. It describes how to enable polyfills in Angular CLI projects via the polyfills.ts file, and for non-CLI projects by directly including scripts in index.html. Mandatory polyfills like ES6 and zone.js are needed to run Angular across browsers, while optional polyfills like web animations polyfill animations in non-supported browsers.

Uploaded by

Minh Long Đặng
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
52 views

Browser Support: Polyfills

This document discusses browser support and polyfills for Angular. It provides tables listing the browser versions Angular supports and optional features that may require polyfills. It describes how to enable polyfills in Angular CLI projects via the polyfills.ts file, and for non-CLI projects by directly including scripts in index.html. Mandatory polyfills like ES6 and zone.js are needed to run Angular across browsers, while optional polyfills like web animations polyfill animations in non-supported browsers.

Uploaded by

Minh Long Đặng
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Browser support

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

Chrome Firefox Edge IE Safari iOS Android IE Mobile

Nougat (7.0)
latest latest 14 11 10 10 11
Marshmallow (6.0)

Lollipop
13 10 9 9
(5.0, 5.1)

KitKat
9 8 8
(4.4)

Jelly Bean
7 7
(4.1, 4.2, 4.3)

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

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.

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.

Enabling polyfills
Angular CLI users enable polyfills through the src/polyfills.ts file that the CLI created with your
project.
This file incorporates the mandatory and many of the optional polyfills as JavaScript import statements.

The npm packages for the mandatory polyfills (such as zone.js ) were installed automatically for you when
you created your project and their corresponding import statements are ready to go. You probably won't
touch these.

But if you need an optional polyfill, you'll have to install its npm package with npm or yarn . For example, if
you need the web animations polyfill, you could install it with either of the following commands:

npm install --save web-animations-js yarn add web-animations-js

Then open the polyfills.ts file and un-comment the corresponding import statement 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 .

If you can't find the polyfill you want in polyfills.ts , add it yourself, following the same pattern:

1. install the npm package


2. import the file in polyfills.ts

Non-CLI users should follow the instructions [below](#non-cli).

{@a polyfill-libs}

Mandatory polyfills

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

Browsers (Desktop & Mobile) Polyfills Required

Chrome, Firefox, Edge, Safari 9+ [ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)

Safari 7 & 8, IE10 & 11, Android 4.1+ [ES6](guide/browser-support#core-es6)

IE9 [ES6
classList](guide/browser-support#classlist)

Optional browser features to polyfill

Some features of Angular may require additional polyfills.


For example, the animations library relies on the standard web animation API, which is only available in
Chrome and Firefox today. You'll need a polyfill to use animations in other browsers.

Here are the features which may require additional polyfills:

Feature Polyfill Browsers (Desktop & Mobile)

[JIT compilation](guide/aot-compiler). [ES7/reflect] All current browsers. Enabled by


Required to reflect for metadata. (guide/browser- default. Can remove If you always
support#core-es7- use AOT and only use Angular
reflect) decorators.

[Animations](guide/animations) [Web Animations] All but Chrome and Firefox


(guide/browser- Not supported in IE9
support#web-
animations)

If you use the following deprecated i18n [Intl API] All but Chrome, Firefox, Edge, IE11
pipes: [date] (guide/browser- and Safari 10
(api/common/DeprecatedDatePipe), support#intl)
[currency]
(api/common/DeprecatedCurrencyPipe),
[decimal]
(api/common/DeprecatedDecimalPipe)
and [percent]
(api/common/DeprecatedPercentPipe)

[NgClass](api/common/NgClass) on [classList] IE10, IE11


SVG elements (guide/browser-
support#classlist)

[Http](guide/http) when sending and [Typed Array] IE 9


receiving binary data (guide/browser-
support#typedarray)
[Blob]
(guide/browser-
support#blob)
[FormData]
(guide/browser-
support#formdata)
Suggested polyfills

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

Polyfill License Size*

ES7/reflect MIT 0.5KB

ES6 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

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

{@a non-cli}

Polyfills for non-CLI users


If you aren't using the CLI, you should add your polyfill scripts directly to the host web page ( index.html ),
perhaps like this.

<!-- pre-zone polyfills --> <script src="nodemodules/core-js/client/shim.min.js"></script> <script


src="nodemodules/web-animations-js/web-animations.min.js"></script>

<!-- zone.js required by Angular --> <script src="node_modules/zone.js/dist/zone.js"></script>

<!-- application polyfills -->

You might also like