{ "id": "guide/browser-support", "title": "Browser support", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Browser supportlink

\n

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

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
BrowserSupported versions
Chromelatest
Firefoxlatest and extended support release (ESR)
Edge2 most recent major versions
IE\n 11
\n *deprecated, see the deprecations guide\n
Safari2 most recent major versions
iOS2 most recent major versions
AndroidQ (10.0), Pie (9.0), Oreo (8.0), Nougat (7.0)
\n
\n

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

\n
\n

Polyfillslink

\n

Angular is built on the latest standards of the web platform.\nTargeting such a wide range of browsers is challenging because they do not support all features of modern browsers.\nYou compensate by loading polyfill scripts (\"polyfills\") for the browsers that you must support.\nThe table below identifies most of the polyfills you might need.

\n
\n

The suggested polyfills are the ones that run full Angular applications.\nYou may need additional polyfills to support features not covered by this list.\nNote that polyfills cannot magically transform an old, slow browser into a modern, fast one.

\n
\n

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.

\n\n

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.\nFor more information about how this works, see Differential Loading in the Deployment guide.

\n

Enabling polyfills with CLI projectslink

\n

The Angular CLI provides support for polyfills.\nIf you are not using the CLI to create your projects, see Polyfill instructions for non-CLI users.

\n

When you create a project with the ng new command, a src/polyfills.ts configuration file is created as part of your project folder.\nThis file incorporates the mandatory and many of the optional polyfills as JavaScript import statements.

\n\n

For example, if you need the optional web animations polyfill, you could install it with npm, using the following command (or the yarn equivalent):

\n\n # install the optional web animations polyfill\n npm install --save web-animations-js\n\n

You can then add the import statement in the src/polyfills.ts file.\nFor many polyfills, you can simply un-comment the corresponding import statement in the file, as in the following example.

\n\n /**\n * Required to support Web Animations `@angular/platform-browser/animations`.\n * Needed for: All but Chrome, Firefox and Opera. https://caniuse.com/web-animation\n **/\n import 'web-animations-js'; // Run `npm install --save web-animations-js`.\n\n

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

\n\n

Mandatory polyfillslink

\n

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

\n\n \n \n \n \n \n \n \n \n
Browsers (Desktop & Mobile)Polyfills Required
\n Chrome, Firefox, Edge,
\n Safari, Android, IE 11\n 		\n ES2015\n
\n

Optional browser features to polyfilllink

\n

Some features of Angular may require additional polyfills.

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
FeaturePolyfillBrowsers (Desktop & Mobile)
\n AnimationBuilder\n (Standard animation support does not require polyfills.)\n \n Web Animations\n \n

If AnimationBuilder is used, enables scrubbing\n support for IE/Edge and Safari.\n (Chrome and Firefox support this natively).

\n
\n NgClass on SVG elements\n \n classList\n \n IE 11\n
\n Router when using hash-based routing\n \n ES7/array\n \n IE 11\n
\n

Suggested polyfillslink

\n

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

\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Polyfill\n \n License\n \n Size*\n
\n ES7/array\n \n MIT\n \n 0.1KB\n
\n ES2015\n \n MIT\n \n 27.4KB\n
\n classList\n \n Public domain\n \n 1KB\n
\n Web Animations\n \n Apache\n \n 14.8KB\n
\n

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

\n\n

Polyfills for non-CLI userslink

\n

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

\n

For example:

\n\n <!-- pre-zone polyfills -->\n <script src=\"node_modules/core-js/client/shim.min.js\"></script>\n <script src=\"node_modules/web-animations-js/web-animations.min.js\"></script>\n <script>\n /**\n * you can configure some zone flags which can disable zone interception for some\n * asynchronous activities to improve startup performance - use these options only\n * if you know what you are doing as it could result in hard to trace down bugs..\n */\n // __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame\n // __Zone_disable_on_property = true; // disable patch onProperty such as onclick\n // __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames\n /*\n * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js\n * with the following flag, it will bypass `zone.js` patch for IE/Edge\n */\n // __Zone_enable_cross_context_check = true;\n </script>\n <!-- zone.js required by Angular -->\n <script src=\"node_modules/zone.js/bundles/zone.umd.js\"></script>\n <!-- application polyfills -->\n\n\n \n
\n\n\n" }