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

626 lines
9.3 KiB
Markdown
Raw Normal View History

# Browser support
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>
Nougat (7.0)<br>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">
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
2017-03-31 19:57:13 -04:00
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 compensate by loading polyfill scripts ("polyfills") for the browsers that you must support.
The [table below](#polyfill-libs) identifies most of the polyfills you might need.
<div class="alert is-important">
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.
</div>
2017-03-31 19:57:13 -04:00
## Enabling polyfills
2017-03-31 19:57:13 -04:00
[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.
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:
<code-example language="sh" class="code-shell">
npm install --save web-animations-js
yarn add web-animations-js
</code-example>
2017-03-31 19:57:13 -04:00
Then open the `polyfills.ts` file and un-comment the corresponding `import` statement
as in the following example:
2017-03-31 19:57:13 -04:00
<code-example title="src/polyfills.ts">
/**
* 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`.
</code-example>
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`
<div class="l-sub-section">
Non-CLI users should follow the instructions [below](#non-cli).
</div>
2017-03-31 19:57:13 -04:00
{@a polyfill-libs}
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">
<th>
Browsers (Desktop & Mobile)
</th>
<th>
Polyfills Required
</th>
</tr>
<tr style="vertical-align: top">
<td>
Chrome, Firefox, Edge, Safari 9+
</td>
<td>
[ES7/reflect](guide/browser-support#core-es7-reflect) (JIT only)
</td>
</tr>
<tr style="vertical-align: top">
<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">
<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
2017-03-31 19:57:13 -04:00
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">
<th>
Feature
</th>
<th>
Polyfill
</th>
<th style="width: 50%">
Browsers (Desktop & Mobile)
</th>
</tr>
<tr style="vertical-align: top">
<td>
[JIT compilation](guide/aot-compiler).
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)
</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>
feat(common): drop use of the Intl API to improve browser support (#18284) BREAKING CHANGE: Because of multiple bugs and browser inconsistencies, we have dropped the intl api in favor of data exported from the Unicode Common Locale Data Repository (CLDR). Unfortunately we had to change the i18n pipes (date, number, currency, percent) and there are some breaking changes. 1. I18n pipes * Breaking change: - By default Angular now only contains locale data for the language `en-US`, if you set the value of `LOCALE_ID` to another locale, you will have to import new locale data for this language because we don't use the intl API anymore. * Features: - you don't need to use the intl polyfill for Angular anymore. - all i18n pipes now have an additional last parameter `locale` which allows you to use a specific locale instead of the one defined in the token `LOCALE_ID` (whose value is `en-US` by default). - the new locale data extracted from CLDR are now available to developers as well and can be used through an API (which should be especially useful for library authors). - you can still use the old pipes for now, but their names have been changed and they are no longer included in the `CommonModule`. To use them, you will have to import the `DeprecatedI18NPipesModule` after the `CommonModule` (the order is important): ```ts import { NgModule } from '@angular/core'; import { CommonModule, DeprecatedI18NPipesModule } from '@angular/common'; @NgModule({ imports: [ CommonModule, // import deprecated module after DeprecatedI18NPipesModule ] }) export class AppModule { } ``` Dont forget that you will still need to import the intl API polyfill if you want to use those deprecated pipes. 2. Date pipe * Breaking changes: - the predefined formats (`short`, `shortTime`, `shortDate`, `medium`, ...) now use the patterns given by CLDR (like it was in AngularJS) instead of the ones from the intl API. You might notice some changes, e.g. `shortDate` will be `8/15/17` instead of `8/15/2017` for `en-US`. - the narrow version of eras is now `GGGGG` instead of `G`, the format `G` is now similar to `GG` and `GGG`. - the narrow version of months is now `MMMMM` instead of `L`, the format `L` is now the short standalone version of months. - the narrow version of the week day is now `EEEEE` instead of `E`, the format `E` is now similar to `EE` and `EEE`. - the timezone `z` will now fallback to `O` and output `GMT+1` instead of the complete zone name (e.g. `Pacific Standard Time`), this is because the quantity of data required to have all the zone names in all of the existing locales is too big. - the timezone `Z` will now output the ISO8601 basic format, e.g. `+0100`, you should now use `ZZZZ` to get `GMT+01:00`. | Field type | Format | Example value | v4 | v5 | |------------|---------------|-----------------------|----|---------------| | Eras | Narrow | A for AD | G | GGGGG | | Months | Narrow | S for September | L | MMMMM | | Week day | Narrow | M for Monday | E | EEEEE | | Timezone | Long location | Pacific Standard Time | z | Not available | | Timezone | Long GMT | GMT+01:00 | Z | ZZZZ | * Features - new predefined formats `long`, `full`, `longTime`, `fullTime`. - the format `yyy` is now supported, e.g. the year `52` will be `052` and the year `2017` will be `2017`. - standalone months are now supported with the formats `L` to `LLLLL`. - week of the year is now supported with the formats `w` and `ww`, e.g. weeks `5` and `05`. - week of the month is now supported with the format `W`, e.g. week `3`. - fractional seconds are now supported with the format `S` to `SSS`. - day periods for AM/PM now supports additional formats `aa`, `aaa`, `aaaa` and `aaaaa`. The formats `a` to `aaa` are similar, while `aaaa` is the wide version if available (e.g. `ante meridiem` for `am`), or equivalent to `a` otherwise, and `aaaaa` is the narrow version (e.g. `a` for `am`). - extra day periods are now supported with the formats `b` to `bbbbb` (and `B` to `BBBBB` for the standalone equivalents), e.g. `morning`, `noon`, `afternoon`, .... - the short non-localized timezones are now available with the format `O` to `OOOO`. The formats `O` to `OOO` will output `GMT+1` while the format `OOOO` will be `GMT+01:00`. - the ISO8601 basic time zones are now available with the formats `Z` to `ZZZZZ`. The formats `Z` to `ZZZ` will output `+0100`, while the format `ZZZZ` will be `GMT+01:00` and `ZZZZZ` will be `+01:00`. * Bug fixes - the date pipe will now work exactly the same across all browsers, which will fix a lot of bugs for safari and IE. - eras can now be used on their own without the date, e.g. the format `GG` will be `AD` instead of `8 15, 2017 AD`. 3. Currency pipe * Breaking change: - the default value for `symbolDisplay` is now `symbol` instead of `code`. This means that by default you will see `$4.99` for `en-US` instead of `USD4.99` previously. * Deprecation: - the second parameter of the currency pipe (`symbolDisplay`) is no longer a boolean, it now takes the values `code`, `symbol` or `symbol-narrow`. A boolean value is still valid for now, but it is deprecated and it will print a warning message in the console. * Features: - you can now choose between `code`, `symbol` or `symbol-narrow` which gives you access to more options for some currencies (e.g. the canadian dollar with the code `CAD` has the symbol `CA$` and the symbol-narrow `$`). 4. Percent pipe * Breaking change - if you don't specify the number of digits to round to, the local format will be used (and it usually rounds numbers to 0 digits, instead of not rounding previously), e.g. `{{ 3.141592 | percent }}` will output `314%` for the locale `en-US` instead of `314.1592%` previously. Fixes #10809, #9524, #7008, #9324, #7590, #6724, #3429, #17576, #17478, #17319, #17200, #16838, #16624, #16625, #16591, #14131, #12632, #11376, #11187 PR Close #18284
2017-08-22 14:30:59 -04:00
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)
</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">
<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">
<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-es7-reflect' href="https://github.com/zloirock/core-js/blob/master/es7/reflect.js">ES7/reflect</a>
</td>
<td>
MIT
</td>
<td>
0.5KB
</td>
</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>.
{@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.
<code-example title="src/index.html">
&lt;!-- pre-zone polyfills -->
&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;!-- zone.js required by Angular -->
&lt;script src="node_modules/zone.js/dist/zone.js">&lt;/script>
&lt;!-- application polyfills -->
</code-example>