+
-
+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
-A particular browser may require at least one polyfill to run _any_ Angular application.
-You may need additional polyfills for specific features.
+[Angular CLI](https://github.com/angular/angular-cli/wiki) users enable polyfills through the `src/polyfills.ts` file that
+the CLI created with your project.
-The tables below can help you determine which polyfills to load, depending on the browsers you target and the features you use.
+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](http://caniuse.com/#feat=web-animation),
+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:
-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.
+
+ /**
+ * 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
+1. `import` the file in `polyfills.ts`
+
+
+Non-CLI users should follow the instructions [below](#non-cli).
+
+{@a polyfill-libs}
-### Mandatory polyfills ##
+### Mandatory polyfills
These are the polyfills required to run an Angular application on each supported browser:
@@ -259,7 +281,8 @@ These are the polyfills required to run an Angular application on each supported
- None
+
+ [ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
|
@@ -296,8 +319,8 @@ These are the polyfills required to run an Angular application on each supported
+### Optional browser features to polyfill
-### 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.
@@ -324,6 +347,27 @@ Here are the features which may require additional polyfills:
+
+
+ |
+
+ [JIT compilation](guide/aot-compiler).
+ Required to reflect for metadata.
+ |
+
+
+
+ [ES7/reflect](guide/browser-support#core-es7-reflect)
+ |
+
+
+ All current browsers.
+ Enabled by default.
+ Can remove If you always use AOT and only use Angular decorators.
+ |
+
+
+
|
@@ -427,6 +471,23 @@ Below are the polyfills which are used to test the framework itself. They are a
|
+
+
+ |
+
+ ES7/reflect
+ |
+
+
+ MIT
+ |
+
+
+ 0.5KB
+ |
+
+
+
|
@@ -545,3 +606,20 @@ Below are the polyfills which are used to test the framework itself. They are a
\* 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="node_modules/core-js/client/shim.min.js"></script>
+ <script src="node_modules/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 -->
+
+
|