mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
- Update Chrome supported version description to match other browsers. - Updates browserslist configuration in build section to match supported browsers PR Close #48782
108 lines
3.5 KiB
Markdown
108 lines
3.5 KiB
Markdown
# Browser support
|
|
|
|
Angular supports most recent browsers.
|
|
This includes the following specific versions:
|
|
|
|
| Browser | Supported versions |
|
|
|:--- |:--- |
|
|
| Chrome | 2 most recent versions |
|
|
| Firefox | latest and extended support release \(ESR\) |
|
|
| Edge | 2 most recent major versions |
|
|
| Safari | 2 most recent major versions |
|
|
| iOS | 2 most recent major versions |
|
|
| Android | 2 most recent major versions |
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
Angular's continuous integration process runs unit tests of the framework on all of these browsers for every pull request, using [Sauce Labs](https://saucelabs.com).
|
|
|
|
</div>
|
|
|
|
## 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 compensate by loading polyfill scripts \("polyfills"\) for the browsers that you must support.
|
|
See instructions on how to include polyfills into your project below.
|
|
|
|
<div class="alert is-important">
|
|
|
|
The suggested polyfills are the ones that run full Angular applications.
|
|
You might need additional polyfills to support features not covered by this list.
|
|
|
|
</div>
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
**NOTE**: <br />
|
|
Polyfills cannot magically transform an old, slow browser into a modern, fast one.
|
|
|
|
</div>
|
|
|
|
## Enabling polyfills with CLI projects
|
|
|
|
The [Angular CLI](cli) provides support for polyfills.
|
|
If you are not using the CLI to create your projects, see [Polyfill instructions for non-CLI users](#non-cli).
|
|
|
|
The `polyfills` options of the [browser](cli/build) and [test](cli/test) builder can be a full path for a file \(Example: `src/polyfills.ts`\) or,
|
|
relative to the current workspace or module specifier \(Example: `zone.js`\).
|
|
|
|
If you create a TypeScript file, make sure to include it in the `files` property of your `tsconfig` file.
|
|
|
|
<code-example language="jsonc" syntax="jsonc">
|
|
|
|
{
|
|
"extends": "./tsconfig.json",
|
|
"compilerOptions": {
|
|
...
|
|
},
|
|
"files": [
|
|
"src/main.ts",
|
|
"src/polyfills.ts"
|
|
]
|
|
...
|
|
}
|
|
|
|
</code-example>
|
|
|
|
|
|
<a id="non-cli"></a>
|
|
|
|
## Polyfills for non-CLI users
|
|
|
|
If you are not using the CLI, add your polyfill scripts directly to the host web page \(`index.html`\).
|
|
|
|
For example:
|
|
|
|
<code-example header="src/index.html" language="html">
|
|
|
|
<!-- pre-zone polyfills -->
|
|
<script src="node_modules/core-js/client/shim.min.js"></script>
|
|
<script>
|
|
/**
|
|
* you can configure some zone flags which can disable zone interception for some
|
|
* asynchronous activities to improve startup performance - use these options only
|
|
* if you know what you are doing as it could result in hard to trace down bugs.
|
|
*/
|
|
// __Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
|
// __Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
|
// __zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
|
/*
|
|
* in Edge developer tools, the addEventListener will also be wrapped by zone.js
|
|
* with the following flag, it will bypass `zone.js` patch for Edge.
|
|
*/
|
|
// __Zone_enable_cross_context_check = true;
|
|
</script>
|
|
<!-- zone.js required by Angular -->
|
|
<script src="node_modules/zone.js/bundles/zone.umd.js"></script>
|
|
<!-- application polyfills -->
|
|
|
|
</code-example>
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-11-04
|