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

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

Браузер Поддерживаемые версии
Chrome Последние
Firefox Последняя
Edge 2 последние основные версии
IE 11,10,9
IE Mobile 11
Safari 2 последних основных версии
iOS 2 последние основные версии
Android Nougat (7.0), Marshmallow (6.0) , Lollipop (5.0, 5.1) KitKat (4.4)

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

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

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

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

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

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

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

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

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

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

Затем откройте файл polyfills.ts и отмените комментарий соответствующего оператора импорта, как в следующем примере:

 /*** Требуется для поддержки  Веб-анимация `@angular/platform-browser/animations`.* Требуется для: всех, кроме Chrome, Firefox и Opera.  http://caniuse.com/#feat=web-animation**/import 'web-animations-js'; //Запускаем `npm install --save web-animations-js`.  

Live Demo:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода

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

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

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

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

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

Браузеры (настольные и мобильные) Требуются полифиллы
Chrome, Firefox, Edge, Safari 9+ ES7/отражать (только JIT)
Safari 7 и 8, IE10 и 11, Android 4.1+ ES6
IE9 ES6, classList

Дополнительные возможности браузера для полифилла

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

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

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

Функция Polyfill Браузеры (настольные и мобильные)
JIT-компиляция. Требуется для отражения метаданных. ES7/отражать Все текущие браузеры. Включено по умолчанию. Можно удалить, если вы всегда используете AOT и используете только декораторы Angular.
Анимация Только если в приложении используется Animation Builder — стандартная поддержка анимации в Angular не работает. Не требует полифиллов (начиная с NG6). Веб-анимация Если используется AnimationBuilder, то полифилл включит поддержку очистки для IE/Edge и Safari (Chrome и Firefox поддерживают это изначально).
Если вы используете следующие устаревшие каналы i18n: дата, валюта, десятичное число, процент Intl API Все, кроме Chrome, Firefox, Edge, IE11 и Safari 10
NgClass в элементах SVG classList IE10, IE11
Http при отправке и получении двоичных данных Типизированный массив Blob FormData IE 9
Маршрутизатор при использовании маршрутизации на основе хеша ES7/array IE 11
Feature Polyfill Браузеры (настольные и мобильные)

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

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

Polyfill Лицензия Размер *
ES7/reflect MIT 0,5 КБ
ES7/массив MIT 0.1KB
ES6 MIT 27,4 КБ
classList Публичный домен 1KB
Intl Лицензия MIT/Unicode 13,5 КБ
Веб-анимация Apache 14. 8 КБ
Типизированный массив MIT 4 КБ
Blob MIT 1,3 КБ
FormData MIT 0.4KB

Полифиллы для не -CLI users

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

       /** * вы можете настроить некоторые флаги зоны, которые могут отключить перехват зоны для некоторых * асинхронных действий для повышения производительности запуска - используйте  эти параметры только * если вы знаете, что делаете, поскольку это может затруднить отслеживание ошибок .. *///__Zone_disable_requestAnimationFrame = true; //отключение патча requestAnimationFrame//__Zone_disable_on_property = true; //отключаем патч onProperty, например onclick//__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; //отключить указанное патчем eventNames/* * в инструментах разработчика IE/Edge, addEventListener также будет заключен в zone.js * со следующим флагом, он будет обходить патч `zone.js` для IE/Edge *///__Zone_enable_cross_context_check  = true;       

Живая демонстрация:

Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь никаких вывод

См. указатель пера от w3resource (@ w3resource) на CodePen.

Оцените статью
nanomode.ru
Добавить комментарий