docs: clarify npm/yarn commands, add blank lines to mix md/html in table (#21606)

PR Close #21606
This commit is contained in:
Judy Bogart 2018-01-30 12:56:20 -08:00 committed by Alex Rickabaugh
parent 1940b18124
commit 9d3326caa7
1 changed files with 116 additions and 117 deletions

View File

@ -6,146 +6,91 @@ Angular supports most recent browsers. This includes the following specific vers
<tr> <tr>
<th> <th>
Browser
</th>
<th>
Supported versions
</th>
</tr>
<tr>
<td>
Chrome Chrome
</th> </td>
<th> <td>
latest
</td>
</tr>
<tr>
<td>
Firefox Firefox
</th> </td>
<th> <td>
latest
</td>
</tr>
<tr>
<td>
Edge Edge
</th> </td>
<th> <td>
2 most recent major versions
</td>
</tr>
<tr>
<td>
IE IE
</th> </td>
<td>
<th> 11<br>10<br>9
Safari </td>
</th> </tr>
<tr>
<th> <tr>
iOS <td>
</th>
<th>
Android
</th>
<th>
IE Mobile IE Mobile
</th>
</tr>
<tr>
<td>
latest
</td> </td>
<td>
latest
</td>
<td>
2 most recent major versions
</td>
<td> <td>
11 11
</td> </td>
</tr>
<tr>
<td> <td>
2 most recent major versions Safari
</td> </td>
<td> <td>
2 most recent major versions 2 most recent major versions
</td> </td>
<td>
Nougat (7.0)<br>Marshmallow (6.0)
</td>
<td>
11
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
iOS
</td> </td>
<td> <td>
2 most recent major versions
</td> </td>
<td>
</td>
<td>
10
</td>
<td>
</td>
<td>
</td>
<td>
Lollipop<br>(5.0, 5.1)
</td>
<td>
</td>
</tr> </tr>
<tr> <tr>
<td> <td>
Android
</td> </td>
<td> <td>
Nougat (7.0)<br>Marshmallow (6.0)<br>Lollipop (5.0, 5.1)<br>KitKat (4.4)
</td> </td>
<td>
</td>
<td>
9
</td>
<td>
</td>
<td>
</td>
<td>
KitKat<br>(4.4)
</td>
<td>
</td>
</tr> </tr>
</table> </table>
@ -184,12 +129,11 @@ This file incorporates the mandatory and many of the optional polyfills as JavaS
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 (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`. But if you need an optional polyfill, you'll have to install its npm package.
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: 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):
<code-example language="sh" class="code-shell"> <code-example language="sh" class="code-shell">
npm install --save web-animations-js npm install --save web-animations-js
yarn add 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: Then open the `polyfills.ts` file and un-comment the corresponding `import` statement as in the following example:
@ -240,7 +184,9 @@ These are the polyfills required to run an Angular application on each supported
</td> </td>
<td> <td>
[ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only) [ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
</td> </td>
</tr> </tr>
@ -252,7 +198,9 @@ These are the polyfills required to run an Angular application on each supported
</td> </td>
<td> <td>
[ES6](guide/browser-support#core-es6) [ES6](guide/browser-support#core-es6)
</td> </td>
</tr> </tr>
@ -264,7 +212,9 @@ These are the polyfills required to run an Angular application on each supported
</td> </td>
<td> <td>
[ES6<br>classList](guide/browser-support#classlist) [ES6<br>classList](guide/browser-support#classlist)
</td> </td>
</tr> </tr>
@ -302,12 +252,16 @@ Here are the features which may require additional polyfills:
<tr style="vertical-align: top"> <tr style="vertical-align: top">
<td> <td>
[JIT compilation](guide/aot-compiler). [JIT compilation](guide/aot-compiler).
Required to reflect for metadata. Required to reflect for metadata.
</td> </td>
<td> <td>
[ES7/reflect](guide/browser-support#core-es7-reflect) [ES7/reflect](guide/browser-support#core-es7-reflect)
</td> </td>
<td> <td>
@ -320,11 +274,15 @@ Here are the features which may require additional polyfills:
<tr style="vertical-align: top"> <tr style="vertical-align: top">
<td> <td>
[Animations](guide/animations) [Animations](guide/animations)
</td> </td>
<td> <td>
[Web Animations](guide/browser-support#web-animations) [Web Animations](guide/browser-support#web-animations)
</td> </td>
<td> <td>
@ -336,11 +294,24 @@ Here are the features which may require additional polyfills:
<tr style="vertical-align: top"> <tr style="vertical-align: top">
<td> <td>
If you use the following deprecated i18n pipes: [date](api/common/DeprecatedDatePipe), [currency](api/common/DeprecatedCurrencyPipe), [decimal](api/common/DeprecatedDecimalPipe) and [percent](api/common/DeprecatedPercentPipe)
If you use the following deprecated i18n pipes:
[date](api/common/DeprecatedDatePipe),
[currency](api/common/DeprecatedCurrencyPipe),
[decimal](api/common/DeprecatedDecimalPipe),
[percent](api/common/DeprecatedPercentPipe)
</td> </td>
<td> <td>
[Intl API](guide/browser-support#intl) [Intl API](guide/browser-support#intl)
</td> </td>
<td> <td>
@ -352,11 +323,16 @@ Here are the features which may require additional polyfills:
<tr style="vertical-align: top"> <tr style="vertical-align: top">
<td> <td>
[NgClass](api/common/NgClass) on SVG elements
[NgClass](api/common/NgClass)
on SVG elements
</td> </td>
<td> <td>
[classList](guide/browser-support#classlist) [classList](guide/browser-support#classlist)
</td> </td>
<td> <td>
@ -368,13 +344,20 @@ Here are the features which may require additional polyfills:
<tr style="vertical-align: top"> <tr style="vertical-align: top">
<td> <td>
[Http](guide/http) when sending and receiving binary data
[Http](guide/http)
when sending and receiving binary data
</td> </td>
<td> <td>
[Typed&nbsp;Array](guide/browser-support#typedarray)<br> [Typed&nbsp;Array](guide/browser-support#typedarray)<br>
[Blob](guide/browser-support#blob)<br> [Blob](guide/browser-support#blob)<br>
[FormData](guide/browser-support#formdata) [FormData](guide/browser-support#formdata)
</td> </td>
<td> <td>
@ -412,7 +395,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<td> <td>
<a id='core-es7-reflect' href="https://github.com/zloirock/core-js/blob/master/es7/reflect.js">ES7/reflect</a> <a id='core-es7-reflect' href="https://github.com/zloirock/core-js/blob/master/es7/reflect.js">ES7/reflect</a>
</td> </td>
<td> <td>
@ -428,7 +413,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<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">ES6</a>
</td> </td>
<td> <td>
@ -444,7 +431,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<td> <td>
<a id='classlist' href="https://github.com/eligrey/classList.js">classList</a> <a id='classlist' href="https://github.com/eligrey/classList.js">classList</a>
</td> </td>
<td> <td>
@ -460,7 +449,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<td> <td>
<a id='intl' href="https://github.com/andyearnshaw/Intl.js">Intl</a> <a id='intl' href="https://github.com/andyearnshaw/Intl.js">Intl</a>
</td> </td>
<td> <td>
@ -476,7 +467,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<td> <td>
<a id='web-animations' href="https://github.com/web-animations/web-animations-js">Web Animations</a> <a id='web-animations' href="https://github.com/web-animations/web-animations-js">Web Animations</a>
</td> </td>
<td> <td>
@ -492,7 +485,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<td> <td>
<a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js">Typed Array</a> <a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js">Typed Array</a>
</td> </td>
<td> <td>
@ -508,7 +503,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<td> <td>
<a id='blob' href="https://github.com/eligrey/Blob.js">Blob</a> <a id='blob' href="https://github.com/eligrey/Blob.js">Blob</a>
</td> </td>
<td> <td>
@ -524,7 +521,9 @@ Below are the polyfills which are used to test the framework itself. They are a
<tr> <tr>
<td> <td>
<a id='formdata' href="https://github.com/francois2metz/html5-formdata">FormData</a> <a id='formdata' href="https://github.com/francois2metz/html5-formdata">FormData</a>
</td> </td>
<td> <td>
@ -546,7 +545,7 @@ computed with the <a href="http://closure-compiler.appspot.com/home">closure com
{@a non-cli} {@a non-cli}
## Polyfills for non-CLI users ## 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. If you are not using the CLI, you should add your polyfill scripts directly to the host web page (`index.html`), perhaps like this.
<code-example title="src/index.html"> <code-example title="src/index.html">
&lt;!-- pre-zone polyfills --> &lt;!-- pre-zone polyfills -->