Angular и ошибки в Internet Explorer

Angular и ошибки в Internet Explorer

От автора: вы установили Angular CLI и использовали его для создания нового приложения. Но, когда вы пытаетесь просмотреть его в Internet Explorer (IE), вы видите в Angular ошибки, а точнее — ничего не видите в браузере. Что дальше?

Плохие новости:

Для поддержки приложениями Angular CLI Internet Explorer требуется выполнить еще нескольких действий.

Хорошие новости:

Это очень просто: раскомментируйте несколько импортов и установите пару пакетов npm.

В этой статье я покажу вам:

Как начать работу с приложением Angular CLI

Ошибку в Internet Explorer

Что на самом деле вызывает ошибку

Два шага, необходимые для поддержки Internet Explorer

Если вы просто хотите заставить его работать и не хотите вникать в детали, вы можете перейти к разделу «Лекарство».

Примечание. Эта статья была обновлена с учетом Angular 6. Однако те же действия подходят и для Angular 5, хотя вы можете увидеть некоторые незначительные отличия в комментариях файла polyfills.ts.

Приступаем. Сначала используйте Angular CLI и создайте стартовое приложение:

Перейдите в любом браузере, кроме Internet Explorer, по адресу: //localhost:4200, и вы увидите, что ваше приложение работает. Например, в Chrome это выглядит так:

Симптом

Однако, если мы попытаемся использовать Internet Explorer, мы увидим:

Ну, похоже, что-то работает, потому что название по крайней мере правильное. Если мы откроем Консоль браузера и перегрузим страницу, мы увидим ошибку в _for-of.js, которая гласит: Exception thrown and not caught

Поэтому вы, вероятно, спросите: «Тодд, что вызывает эту ошибку?» Хороший вопрос. Ответ…

Болезнь

Мы видим эту ошибку, потому что существует много часто используемых частей JavaScript, которые Internet Explorer просто не поддерживает. Это особенно касается функций массива.
Например, просмотрите Mozilla Developer Network JavaScript Reference. У вас есть книга, помеченная в панели «Избранное» справа? В частности, давайте рассмотрим for…of в разделе Statements & declarations. Прокрутите страницу вниз до пункта Browser Compatibility.

Мы видим, что IE не поддерживает for..of. Следовательно, когда код ядра Angular пытается его использовать, выдается ошибка.

Однако без паники. Angular использует библиотеку core-js Дениса Пушкарева (zloirock), чтобы предоставить полифиллы для всего, что нужно Angular, но что не поддерживается IE. Нам просто нужно импортировать ее.

Итак, теперь, когда мы определили проблему, давайте исправим ее!

Лечение

Чтобы заставить IE работать, нам нужно выполнить два основных шага:

Раскомментировать некоторые импорты в файле polyfill.ts.

Установить пару пакетов npm.

Импорт полифиллов

Сначала откройте в своей IDE или текстовом редакторе файл: ie-test\src\polyfills.ts. Раскомментируйте все строки импорта. Для меня самый простой способ — это просто заменить все

После этого мой файл выглядит так:

Установите пакеты npm

Обратите внимание, что в строках 38 и 54 в комментариях есть команды npm install. Если вы используете раннюю версию Angular CLI, может быть и третья команда. Для Angular CLI версий 6.0 и 1.7 вам необходимо запустить:

Выздоровление

Теперь в корне вашего проекта просто запустите:

Откройте в Internet Explorer: http:\\localhost:4200, и вы увидите, что ваше приложение работает.

Заключение

Реализовать поддержку Internet Explorer в Angular легко, если вы просто запомните, где найти файл polyfills.ts. Наконец, найдите минутку, чтобы зайти на проект core-js на GitHub и оценить его.

Автор: Todd Palmer

Источник: //blog.angularindepth.com/

Редакция: Команда webformyself.

Метки:

Похожие статьи:

Комментарии Вконтакте: