angular-cn/aio/content/guide/browser-support.md

555 lines
6.9 KiB
Markdown
Raw Normal View History

@title
Browser support
@intro
Browser support and polyfills guide.
@description
2017-03-31 19:57:13 -04:00
Angular supports most recent browsers. This includes the following specific versions:
<table>
<tr>
<th>
Chrome
</th>
<th>
Firefox
</th>
<th>
Edge
</th>
<th>
IE
</th>
<th>
Safari
</th>
<th>
iOS
</th>
<th>
Android
</th>
<th>
IE Mobile
</th>
</tr>
<tr>
<td>
latest
</td>
<td>
latest
</td>
<td>
14
</td>
<td>
11
</td>
<td>
10
</td>
<td>
10
</td>
<td>
Marshmallow (6.0)
</td>
<td>
11
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
13
</td>
<td>
10
</td>
<td>
9
</td>
<td>
9
</td>
<td>
Lollipop<br>(5.0, 5.1)
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
9
</td>
<td>
8
</td>
<td>
8
</td>
<td>
KitKat<br>(4.4)
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
7
</td>
<td>
7
</td>
<td>
Jelly Bean<br>(4.1, 4.2, 4.3)
</td>
<td>
</td>
</tr>
</table>
2017-04-10 11:51:13 -04:00
<div class="l-sub-section">
2017-03-31 19:57:13 -04:00
Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request,
using <a href="https://saucelabs.com/">SauceLabs</a> and
<a href="https://www.browserstack.com">Browserstack</a>.
2017-04-10 11:51:13 -04:00
</div>
2017-03-31 19:57:13 -04:00
## 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.
You can compensate by loading polyfill scripts ("polyfills") on the host web page (`index.html`)
that implement missing features in JavaScript.
2017-03-31 19:57:13 -04:00
<code-example path="quickstart/src/index.html" region="polyfills" title="quickstart/src/index.html" linenums="false">
</code-example>
2017-03-31 19:57:13 -04:00
A particular browser may require at least one polyfill to run _any_ Angular application.
You may need additional polyfills for specific features.
The tables below can help you determine which polyfills to load, depending on the browsers you target and the features you use.
2017-04-10 11:51:13 -04:00
<div class="alert is-important">
2017-03-31 19:57:13 -04:00
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.
2017-04-10 11:51:13 -04:00
</div>
2017-03-31 19:57:13 -04:00
### Mandatory polyfills ##
These are the polyfills required to run an Angular application on each supported browser:
<table>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<th>
Browsers (Desktop & Mobile)
</th>
<th>
Polyfills Required
</th>
</tr>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<td>
Chrome, Firefox, Edge, Safari 9+
</td>
<td>
None
</td>
</tr>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<td>
Safari 7 & 8, IE10 & 11, Android 4.1+
</td>
<td>
2017-03-31 19:57:13 -04:00
[ES6](guide/browser-support#core-es6)
</td>
</tr>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<td>
IE9
</td>
<td>
2017-03-31 19:57:13 -04:00
[ES6<br>classList](guide/browser-support#classlist)
</td>
</tr>
</table>
2017-03-31 19:57:13 -04:00
### 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.
You'll need a polyfill to use animations in other browsers.
Here are the features which may require additional polyfills:
<table>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<th>
Feature
</th>
<th>
Polyfill
</th>
<th style="width: 50%">
Browsers (Desktop & Mobile)
</th>
</tr>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<td>
[Animations](guide/animations)
</td>
<td>
2017-03-31 19:57:13 -04:00
[Web Animations](guide/browser-support#web-animations)
</td>
<td>
All but Chrome and Firefox<br>Not supported in IE9
</td>
</tr>
<tr style="vertical-align: top">
<td>
[Date](api/common/DatePipe), [currency](api/common/CurrencyPipe), [decimal](api/common/DecimalPipe) and [percent](api/common/PercentPipe) pipes
</td>
<td>
2017-03-31 19:57:13 -04:00
[Intl API](guide/browser-support#intl)
</td>
<td>
All but Chrome, Firefox, Edge, IE11 and Safari 10
</td>
</tr>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<td>
[NgClass](api/common/NgClass) on SVG elements
</td>
<td>
2017-03-31 19:57:13 -04:00
[classList](guide/browser-support#classlist)
</td>
<td>
IE10, IE11
</td>
</tr>
<tr style="vertical-align: top">
2017-03-31 19:57:13 -04:00
<td>
[Http](guide/http) when sending and receiving binary data
</td>
<td>
2017-03-31 19:57:13 -04:00
[Typed&nbsp;Array](guide/browser-support#typedarray) <br>[Blob](guide/browser-support#blob)<br>[FormData](guide/browser-support#formdata)
</td>
<td>
IE 9
</td>
</tr>
</table>
2017-03-31 19:57:13 -04:00
### Suggested polyfills ##
Below are the polyfills which are used to test the framework itself. They are a good starting point for an application.
<table>
<tr>
<th>
Polyfill
</th>
<th>
License
</th>
<th>
Size*
</th>
</tr>
<tr>
<td>
<a id='core-es6' href="https://github.com/zloirock/core-js">ES6</a>
</td>
<td>
MIT
</td>
<td>
27.4KB
</td>
</tr>
<tr>
<td>
<a id='classlist' href="https://github.com/eligrey/classList.js">classList</a>
</td>
<td>
Public domain
</td>
<td>
1KB
</td>
</tr>
<tr>
<td>
<a id='intl' href="https://github.com/andyearnshaw/Intl.js">Intl</a>
</td>
<td>
MIT / Unicode license
</td>
<td>
13.5KB
</td>
</tr>
<tr>
<td>
<a id='web-animations' href="https://github.com/web-animations/web-animations-js">Web Animations</a>
</td>
<td>
Apache
</td>
<td>
14.8KB
</td>
</tr>
<tr>
<td>
<a id='typedarray' href="https://github.com/inexorabletash/polyfill/blob/master/typedarray.js">Typed Array</a>
</td>
<td>
MIT
</td>
<td>
4KB
</td>
</tr>
<tr>
<td>
<a id='blob' href="https://github.com/eligrey/Blob.js">Blob</a>
</td>
<td>
MIT
</td>
<td>
1.3KB
</td>
</tr>
<tr>
<td>
<a id='formdata' href="https://github.com/francois2metz/html5-formdata">FormData</a>
</td>
<td>
MIT
</td>
<td>
0.4KB
</td>
</tr>
</table>
2017-03-31 19:57:13 -04:00
\* Figures are for minified and gzipped code,
computed with the <a href="http://closure-compiler.appspot.com/home">closure compiler</a>.