Поддержка браузера

Angular поддерживает самые последние браузеры. Это включает в себя следующие конкретные версии:

Polyfills

Angular построен по последним стандартам веб-платформы. Ориентация на такой широкий спектр браузеров является сложной задачей, поскольку они не поддерживают все функции современных браузеров.

Чтобы компенсировать эти старые неподдерживающие браузеры, мы загружаем сценарии полизаполнения («полизаполнения»). В следующем разделе мы определим некоторые из полифилов, которые могут вам понадобиться.

Предлагаемые полифилы - те, которые выполняют полные приложения Angular. Вам могут понадобиться дополнительные полифиллы для поддержки функций, не включенных в этот список. Обратите внимание, что полифиллы не могут волшебным образом преобразовать старый, медленный браузер в современный, быстрый.

Включение полифилов

Пользователи Angular CLI включают полифилы через файл src / polyfills.ts, который CLI создал с вашим проектом.

Этот файл включает в себя обязательные и многие из необязательных полизаполнений как операторы импорта JavaScript.

Пакеты npm для обязательных полифильмов (таких как zone.js) были установлены автоматически для вас, когда вы создали свой проект, и их соответствующие операторы импорта готовы к работе. Вы, вероятно, не будете прикасаться к ним.

Но если вам нужен дополнительный polyfill, вам придется установить его пакет npm. Например, если вам нужен полифилл веб-анимации, вы можете установить его с помощью npm, используя следующую команду (или эквивалент пряжи):

```npm install --save web-animations-js```

Обратите внимание, что полифил web-animations.js приведен только в качестве примера, он больше не является строгим требованием для angular.

Затем откройте файл 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`.

Демонстрация в реальном времени:

См. Pen src / polyfills.ts от w3resource ( @ w3resource ) в CodePen .

Если вы не можете найти нужный вам polyfill в polyfills.ts, добавьте его самостоятельно, следуя той же схеме:

1. установить пакет npm
2. импортировать файл в polyfills.ts

Обязательные полифилы

Это полифилы, необходимые для запуска приложения Angular на каждом поддерживаемом браузере:

Дополнительные функции браузера для заполнения

Для некоторых функций Angular могут потребоваться дополнительные полифилы.

Например, библиотека анимаций опирается на стандартный API веб-анимации, который доступен только в Chrome и Firefox сегодня. (обратите внимание, что зависимость web-animations-js в Angular необходима только при использовании AnimationBuilder.)

Вот функции, которые могут потребовать дополнительных полифилов:

Предлагаемые полифилы

Ниже приведены полифилы, которые используются для тестирования самого каркаса. Они являются хорошей отправной точкой для приложения.

Polyfills для пользователей без CLI

Если вы не используете CLI, вы должны добавить свои сценарии polyfill непосредственно на веб-страницу хоста (index.html), возможно, так.

<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.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__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
  /*
   * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
   * with the following flag, it will bypass `zone.js` patch for IE/Edge
   */
  // __Zone_enable_cross_context_check = true;
</script>
<!-- zone.js required by Angular -->
<script src="node_modules/zone.js/dist/zone.js"></script>
<!-- application polyfills -->

Демонстрация в реальном времени:

Смотрите индекс Pen по w3resource ( @ w3resource ) на CodePen .

Предыдущий: Компилятор Ahead-of-Time (AOT)
Далее: Создание и обслуживание приложений Angular