honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: update polyfill support doc (#31262) 

PR Close #31262
This commit is contained in:
Judy Bogart 2019-06-25 11:42:26 -07:00 committed by Jason Aden
parent 40aaa42f44
commit 8052de07e2
1 changed files with 37 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
aio/content/guide/browser-support.md
View File

@ -53,7 +53,7 @@ Angular supports most recent browsers. This includes the following specific vers
IE IE
</td> </td>
<td> <td>
11<br>10<br>9 11, 10, 9
</td> </td>
</tr> </tr>
<tr> <tr>
@ -89,7 +89,7 @@ Angular supports most recent browsers. This includes the following specific vers
</td> </td>
<td> <td>
Nougat (7.0)<br>Marshmallow (6.0)<br>Lollipop (5.0, 5.1)<br>KitKat (4.4) Nougat (7.0), Marshmallow (6.0), Lollipop (5.0, 5.1), KitKat (4.4)
</td> </td>
</tr> </tr>
@ -127,25 +127,27 @@ In Angular CLI version 8 and higher, applications are built using *differential
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. 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](guide/deployment#differential-loading) in the [Deployment guide](guide/deployment). For more information about how this works, see [Differential Loading](guide/deployment#differential-loading) in the [Deployment guide](guide/deployment).
## Enabling polyfills ## Enabling polyfills with CLI projects
[Angular CLI](cli) users enable polyfills through the `src/polyfills.ts` file that The [Angular CLI](cli) provides support for polyfills.
the CLI created with your project. If you are not using the CLI to create your projects, see [Polyfill instructions for non-CLI users](#non-cli).
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. 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. * The npm packages for the [_mandatory_ polyfills](#polyfill-libs) (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.
But if you need an optional polyfill, you'll have to install its npm package. * 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.
For example, [if you need the web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
For example, if you need the optional [web animations polyfill](http://caniuse.com/#feat=web-animation), you could install it with `npm`, using the following command (or the `yarn` equivalent):
<code-example language="sh" class="code-shell"> <code-example language="sh" class="code-shell">
# note that the web-animations-js polyfill is only here as an example # install the optional web animations polyfill
# it isn't a strict requirement of Angular anymore (more below)
npm install --save web-animations-js npm install --save web-animations-js
</code-example> </code-example>
Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example: 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.
<code-example header="src/polyfills.ts"> <code-example header="src/polyfills.ts">
/** /**
@ -155,23 +157,14 @@ Then open the `polyfills.ts` file and un-comment the corresponding `import` stat
import 'web-animations-js'; // Run `npm install --save web-animations-js`. import 'web-animations-js'; // Run `npm install --save web-animations-js`.
</code-example> </code-example>
If you can't find the polyfill you want in `polyfills.ts`, If the polyfill you want is not already in `polyfills.ts` file, add the `import` statement by hand.
add it yourself, following the same pattern:
1. install the npm package
1. `import` the file in `polyfills.ts`
<div class="alert is-helpful">
Non-CLI users should follow the instructions [below](#non-cli).
</div>
{@a polyfill-libs} {@a polyfill-libs}
### Mandatory polyfills ### Mandatory polyfills
These are the polyfills required to run an Angular application on each supported browser: These are the polyfills required to run an Angular application on each supported browser:
<table> <table>
<tr style="vertical-align: top"> <tr style="vertical-align: top">
@ -189,26 +182,13 @@ These are the polyfills required to run an Angular application on each supported
<tr style="vertical-align: top"> <tr style="vertical-align: top">
<td> <td>
Chrome, Firefox, Edge, Safari 9+ Chrome, Firefox, Edge, <br>
Safari, Android, IE10+
</td> </td>
<td> <td>
[ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only) [ES2015](guide/browser-support#core-es6)
</td>
</tr>
<tr style="vertical-align: top">
<td>
Safari 7 & 8, IE10 & 11, Android 4.1+
</td>
<td>
[ES6](guide/browser-support#core-es6)
</td> </td>
@ -222,7 +202,7 @@ These are the polyfills required to run an Angular application on each supported
<td> <td>
[ES6<br>classList](guide/browser-support#classlist) ES2015<br>[classList](guide/browser-support#classlist)
</td> </td>
@ -235,12 +215,6 @@ These are the polyfills required to run an Angular application on each supported
Some features of Angular may require additional polyfills. 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:
<table> <table>
<tr style="vertical-align: top"> <tr style="vertical-align: top">
@ -263,31 +237,8 @@ Here are the features which may require additional polyfills:
<td> <td>
[JIT compilation](guide/aot-compiler). [AnimationBuilder](api/animations/AnimationBuilder).
(Standard animation support does not require polyfills.)
Required to reflect for metadata.
</td>
<td>
[ES7/reflect](guide/browser-support#core-es7-reflect)
</td>
<td>
All current browsers. Enabled by default.
Can remove if you always use AOT and only use Angular decorators.
</td>
</tr>
<tr style="vertical-align: top">
<td>
[Animations](guide/animations)
<br>Only if `Animation Builder` is used within the application--standard
animation support in Angular doesn't require any polyfills (as of NG6).
</td> </td>
@ -298,8 +249,9 @@ Here are the features which may require additional polyfills:
</td> </td>
<td> <td>
<p>If AnimationBuilder is used then the polyfill will enable scrubbing <p>If AnimationBuilder is used, enables scrubbing
support for IE/Edge and Safari (Chrome and Firefox support this natively).</p> support for IE/Edge and Safari.
(Chrome and Firefox support this natively).</p>
</td> </td>
</tr> </tr>
@ -308,15 +260,10 @@ Here are the features which may require additional polyfills:
<td> <td>
If you use the following deprecated i18n pipes: If you use the following deprecated i18n pipes:
[date](api/common/DeprecatedDatePipe), [date](api/common/DeprecatedDatePipe),
[currency](api/common/DeprecatedCurrencyPipe), [currency](api/common/DeprecatedCurrencyPipe),
[decimal](api/common/DeprecatedDecimalPipe), [decimal](api/common/DeprecatedDecimalPipe),
[percent](api/common/DeprecatedPercentPipe) [percent](api/common/DeprecatedPercentPipe)
</td> </td>
@ -337,9 +284,7 @@ Here are the features which may require additional polyfills:
<td> <td>
[NgClass](api/common/NgClass) [NgClass](api/common/NgClass) on SVG elements
on SVG elements
</td> </td>
<td> <td>
@ -358,9 +303,7 @@ Here are the features which may require additional polyfills:
<td> <td>
[Http](guide/http) [Http](guide/http) when sending and receiving binary data
when sending and receiving binary data
</td> </td>
<td> <td>
@ -383,9 +326,8 @@ Here are the features which may require additional polyfills:
<td> <td>
[Router](guide/router) [Router](guide/router) when using
[hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
when using [hash-based routing](guide/router#appendix-locationstrategy-and-browser-url-styles)
</td> </td>
<td> <td>
@ -404,8 +346,9 @@ Here are the features which may require additional polyfills:
### Suggested polyfills ## ### Suggested polyfills
Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
The following polyfills are used to test the framework itself. They are a good starting point for an application.
<table> <table>
@ -426,24 +369,6 @@ Below are the polyfills which are used to test the framework itself. They are a
</tr> </tr>
<tr>
<td>
<a id='core-es7-reflect' href="https://github.com/zloirock/core-js/tree/v2/fn/reflect">ES7/reflect</a>
</td>
<td>
MIT
</td>
<td>
0.5KB
</td>
</tr>
<tr> <tr>
<td> <td>
@ -466,7 +391,7 @@ Below are the polyfills which are used to test the framework itself. They are a
<td> <td>
<a id='core-es6' href="https://github.com/zloirock/core-js">ES6</a> <a id='core-es6' href="https://github.com/zloirock/core-js">ES2015</a>
</td> </td>
@ -595,11 +520,14 @@ Below are the polyfills which are used to test the framework itself. They are a
computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>. computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>.
{@a non-cli} {@a non-cli}
## Polyfills for non-CLI users ## 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. If you are not using the CLI, add your polyfill scripts directly to the host web page (`index.html`).
<code-example header="src/index.html"> For example:
<code-example header="src/index.html" language="html" linenums="false">
&lt;!-- pre-zone polyfills --> &lt;!-- pre-zone polyfills -->
&lt;script src="node_modules/core-js/client/shim.min.js">&lt;/script> &lt;script src="node_modules/core-js/client/shim.min.js">&lt;/script>
&lt;script src="node_modules/web-animations-js/web-animations.min.js">&lt;/script> &lt;script src="node_modules/web-animations-js/web-animations.min.js">&lt;/script>