w3resource

Browser support

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

Browser Supported Versions
Chrome Latest
Firefox Latest
Edge 2 most recent major versions
IE 11,10,9
IE Mobile 11
Safari 2 most recent major versions
iOS 2 most recent major versions
Android Nougat(7.0),Marshmallow(6.0),Lollipop(5.0, 5.1) KitKat (4.4)

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.

To compensate for these older nonsupportive browsers, we load polyfill scripts(?polyfills?). In the next section, we will identify some 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. For example, if you need the web animations polyfill, you could install it with npm, using the following command (or the yarn equivalent):

```npm install --save web-animations-js```

Note that the web-animations.js polyfill is only here as an example, it isn't a strict requirement for angular anymore.

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

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen src/polyfills.ts by w3resource (@w3resource) on CodePen.


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

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 (JIT only)
Safari 7 & 8, IE10 & 11, Android 4.1+ ES6
IE9 ES6, 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. (note that the dependency of web-animations-js in Angular is only necessary if AnimationBuilder is used.)

Here are the features which may require additional polyfills:

Feature Polyfill Browsers (Desktop & Mobile)
JIT compilation. Required to reflect for metadata. ES7/reflect All current browsers. Enabled by default. Can remove if you always use AOT and only use Angular decorators.
Animations Only if Animation Builder is used within the application--standard animation support in Angular doesn't require any polyfills (as of NG6). Web Animations If AnimationBuilder is used then the polyfill will enable scrubbing support for IE/Edge and Safari (Chrome and Firefox support this natively).
If you use the following deprecated i18n pipes: date, currency, decimal, percent Intl API All but Chrome, Firefox, Edge, IE11 and Safari 10
NgClass on SVG elements classList IE10, IE11
Http when sending and receiving binary data Typed Array Blob FormData IE 9
Router when using hash-based routing ES7/array IE 11
Feature Polyfill Browsers (Desktop & Mobile)

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
ES7/array MIT 0.1KB
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

Polyfills for non-CLI users

If you are not 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="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 -->

Live Demo:

It is just a code snippet explaining a particular concept and may not have any output

See the Pen index by w3resource (@w3resource) on CodePen.


Previous: The Ahead-of-Time (AOT) compiler
Next: Building and serving Angular apps