Angular 2/4/5 не работает в IE11

124

Я пытаюсь понять, почему мое приложение angular 2 зависает, показывая Загрузка ... при работе в IE 11.

Следуя чьему-то предложению, я попробовал этот плункер, опубликованный кем-то при переполнении стека, как в Chrome, так и в IE 11. Работает нормально в Chrome, но не работает в IE 11. Та же ошибка, застрял при сообщении «Загрузка ...»

Плункер: https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Router Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

Кто-нибудь знает, почему IE 11 не запускает приложение angular 2?

Спасибо!

angular typescript internet-explorer Пэт Крушитель Лапланте
источник

Ответ - использовать на данный момент 2.0.0-beta.0.

Пэт Боун Крашер Лапланте

187

Последняя версия angular по умолчанию настроена только для вечнозеленых браузеров ...

Текущая настройка предназначена для так называемых «вечнозеленых» браузеров; последние версии браузеров, которые автоматически обновляются. Это включает Safari> = 10, Chrome> = 55 (включая Opera), Edge> = 13 для настольных ПК, а также iOS 10 и Chrome на мобильных устройствах.
Это также включает в себя firefox, хотя и не упоминается.

См. Здесь дополнительную информацию о поддержке браузером, а также список предлагаемых полифилов для конкретных браузеров. https://angular.io/guide/browser-support#polyfill-libs

Это означает, что вам нужно вручную включить правильные полифилы, чтобы Angular работал в IE11 и ниже.

Для этого зайдите в polyfills.ts( srcпо умолчанию в папку) и просто раскомментируйте следующие импортированные файлы:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/set';

Обратите внимание, что комментарий находится буквально в файле, поэтому его легко найти.

Если у вас по-прежнему возникают проблемы, вы можете понизить рейтинг targetсвойства до es5в, tsconfig.jsonкак было @MikeDubпредложено. Это меняет вывод компиляции любых es6определений на es5определения. Например, функции с жирной стрелкой ( ()=>{}) будут скомпилированы в анонимные функции ( function(){}). Вы можете найти список поддерживаемых es6 браузеров здесь .

Ноты

• В комментариях @jackOfAllменя спросили, загружаются ли полифиллы IE11, даже если пользователь работает в вечнозеленом браузере, которому они не нужны. Ответ - да! Включение IE11 polyfills будет ваш polyfill файл из ~162KBк ~258KBсостоянию на 8 августа '17. Я попытался решить эту проблему, но в настоящее время это не представляется возможным.

• Если вы получаете ошибки в IE10 и ниже, перейдите в вас package.jsonи понижение рейтинга webpack-dev-serverв 2.7.1частности. Версии выше этой больше не поддерживают «старые» версии IE.

ZZE
источник

3

Мой проект angular 5 также имеет ту же ошибку, даже если я раскомментировал полифилл для IE, все еще не может работать в браузере IE. Слишком странно ....

Эбби

Раскомментируйте весь упомянутый импорт, а также импортируйте NgClass ниже. Наконец, установите «npm install --save classlist.js». В моем случае это сработало.

Vaibhav

2

@dudewad Я экспериментировал с созданием двух отдельных пакетов, один явно для IE11, а затем заключал этот пакет в условный комментарий IE, который остановил бы его прохождение в chrome.

Zze

1

@Zze ну, это уж точно с твоей стороны. Хорошо, мне это нравится.

dudewad

1

Условные комментарии @Zze были удалены в IE10, они поддерживаются только в IE5-9. Таким образом, ваш пакет IE не будет загружен для IE10 +, если вы специально не обнюхали пользовательский агент, чтобы добавить свой пакет на страницу во время выполнения.

bmcminn

22

У меня была такая же проблема, и ни одно из решений не помогло мне. Вместо этого добавив следующую строку в (домашнюю страницу) .html под <head>исправлением.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Алекс В.
источник

Учитывая информацию из этого SO stackoverflow.com/questions/26346917/… , рекомендация использовать X-UA-Compatible кажется недействительной.

Lubiluk

19

Я столкнулся с этой проблемой сегодня. Я нашел на GitHub решение, которое не требует перехода на более позднюю версию бета-версии.

Добавьте в свой html следующий скрипт:

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

Это решило проблему для меня. Для получения дополнительной информации вы можете следить за проблемой github здесь: https://github.com/angular/angular/issues/7144

Эшли Гренон
источник

2

это решение не сработало для меня :( ... [в проекте VS2015, работающем в IE]

Джейлан Мумун Коджабаш

12

По состоянию на февраль 2017 г.

При использовании проекта Angular-Cli все строки в polyfills.tsфайле уже были раскомментированы, поэтому все полифиллы уже использовались.

Я нашел здесь это решение, чтобы исправить свою проблему.

Подводя итог приведенной выше ссылке, IE не поддерживает функции лямбда-стрелок / жирных стрелок, которые являются особенностью es6 . ( Это если polyfills.ts у вас не работает ).

Решение : вам нужно настроить таргетинг на es5, чтобы он работал в любых версиях IE, поддержка этого была только в новом браузере Edge от Microsoft.

Это находится в src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",

MikeDub
источник

Этот ответ вводит в заблуждение. Полифиллы - это сценарии, которые делают IE 9 и более поздние версии совместимыми со стандартами ES6, как показано здесь: angular.io/docs/ts/latest/guide/browser-support.html Так что не имеет значения, поддерживает ли браузер изначально функции стрелок, полифиллы полностью решают эту проблему.

Zze

8

Как то, что я испытал в моем случае ... вводит в заблуждение? Полифиллы уже были раскомментированы, и они не устранили проблему, с которой я столкнулся в IE11. Вряд ли это заслуживает голоса против.

MikeDub

Перечитав это, я понимаю, что вы пытаетесь сказать, но то, как это сейчас сформулировано, звучит так, будто вам нужно вручную изменить все свои .tsфайлы с использования жирной стрелки на анонимные функции. Я думаю, что вы должны вырезать цитату из этой ссылки о том, чем отличается вывод компилятора, если вы измените цель сценария ecma, что отныне смягчает проблему.

Zze

5

Кроме того, я уже нацелен на es5 в своем tsconfig, и у меня все еще есть проблемы.

gh0st 02

1

@MikeDub Я пробовал использовать ваше решение, но оно не работает в IE11. Можете ли вы предоставить мне лучший подход.

Прасанна Сасне

11

Вам нужно будет настроить файл polyfills.ts для ваших целевых браузеров, раскомментировав соответствующие разделы.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Джигар Бхатт
источник

1

Это круто. Спасибо.

AtLeastTheresToast

10

Для меня с iexplorer 11 и Angular 2 я исправил все вышеперечисленные проблемы, выполнив 2 вещи:

в index.html добавьте:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

в src \ polyfills.ts раскомментируйте:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Белен Мартин
источник

1

Да, это работает для IE11, но не для IE10:

ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)

Junior Mayhé

10

Не комментируйте некоторые импортированные файлы в файле polyfill.ts.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Развернуть фрагмент

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

npm install --save classlist.js

npm install --save web-animations-js

теперь откройте IE, визуализируйте свое приложение и проверьте :)

Али
источник

8

По состоянию на сентябрь 2017 года (версия узла = v6.11.3, версия npm = 3.10.10) у меня сработало следующее (спасибо @Zze):

Отредактируйте polyfills.tsи раскомментируйте импорт, необходимый для IE11.

Точнее, отредактируйте polyfills.ts( srcпо умолчанию в папке) и просто раскомментируйте все строки, необходимые для IE11 (комментарии внутри файла объясняют, какой именно импорт необходим для запуска в IE11).

Небольшое предупреждение: будьте внимательны, раскомментируя строки для classlist.jsи web-animations-js. Каждая из этих прокомментированных строк имеет определенный комментарий: вы должны запустить связанные команды npm, прежде чем раскомментировать их, иначе обработка polyfills.ts будет прервана.

В качестве объяснения, полифиллы - это фрагменты кода, которые реализуют функцию в веб-браузере, которая ее не поддерживает. Вот почему в конфигурации polyfills.ts по умолчанию активен только минимальный набор импорта (потому что он нацелен на так называемые «вечнозеленые» браузеры; последние версии браузеров, которые обновляются автоматически ).

Ekeko
источник

8

РЕДАКТИРОВАТЬ 2018/05/15 : этого можно достичь с помощью метатега ; добавьте этот тег в свой index.html и не обращайте внимания на это сообщение.

Это не полный ответ на вопрос (технический ответ см. В ответе @Zze выше ), но есть важный шаг, который необходимо добавить:

РЕЖИМ СОВМЕСТИМОСТИ

Даже при наличии соответствующих полифиллов по-прежнему возникают проблемы с запуском приложений Angular 2+, использующих полифилы в IE11. Если вы запускаете сайт за пределами узла интрасети (т. Е. Если вы тестируете его на http: // localhost или другом сопоставленном локальном доменном имени), вы должны перейти в настройки просмотра в режиме совместимости и снять флажок «Отображать сайты интрасети в режиме совместимости», поскольку представление совместимости IE11 нарушает некоторые соглашения, включенные в полифилы ES5 для Angular.

Дробовик ниндзя
источник

1

Если вы последуете этому решению, вам придется сделать это на всех клиентах, на которых запущено ваше приложение. Добавление специального тега к вашему html-файлу заставляет браузер работать в последней доступной версии вместо режима совместимости. Чтобы найти тег, обратитесь к следующему ответу: stackoverflow.com/a/47777695/4628364

Poly

2

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

Кайл Васселла

6

У меня есть приложение Angular4, даже у меня оно не работало в браузере IE11, я внес следующие изменения, теперь оно работает правильно. Просто добавьте код ниже в файл index.html

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Просто вам нужно раскомментировать эти строки ниже из файла polyfills.ts

import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Эти 2 шага решат вашу проблему, дайте мне знать, если что-нибудь будет там. Спасибо!!!

Санджай Тивари
источник

Я уже раскомментировал эти 2 части, но они все еще не работают, у вас есть другое решение

Менна Рамадан

5

Если у вас все еще есть проблемы с тем, что не все функции JavaScript работают, добавьте эту строку в свои полифиллы. Он исправляет отсутствующий метод значений:

import 'core-js/es7/object';

И эта строка исправляет отсутствующий метод include:

import 'core-js/es7/array'

Кристиан
источник

4

У меня была такая же проблема, если вы включили отображение сайтов интрасети в режиме совместимости, polyfills.ts не будет работать, вам все равно нужно добавить следующую строку, как было сказано.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Иван Лопес
источник

3

изменения tsconfig.json

"target":"es5",

решил мою проблему

user3050538
источник

2

Что сработало для меня, так это то, что я выполнил следующие шаги, чтобы улучшить производительность моего приложения в IE 11 1.) В файле Index.html добавьте следующие CDN

<script src="https://npmcdn.com/angular2@2.0.0- 
 beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

2.) В файле polyfills.ts добавьте следующий импорт:

import 'core-js/client/shim';

Гарав Гупта
источник

2

В polyfills.ts

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';

import 'core-js/es6/array';
import 'core-js/es7/array';

import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * 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`.

Кулдип Д. Ганди
источник

2

Если ни одно из других решений у вас не работает, стоит изучить источник проблемы. Возможно, модуль npm напрямую вставляет код ES6, который невозможно передать.

В моем случае у меня был

SCRIPT1002: синтаксическая ошибка vendor.js (114536,27) в следующей строке:

const ucs2encode = array => String.fromCodePoint(...array);

Я поискал в папке node_modules и нашел, из какого файла пришла строка. Оказалось, что виновником был punycode.js. который в своей версии 2.1.0 напрямую использует ES6.

После того, как я понизил его до версии 1.4.1, использующей ES5, проблема была решена.

typhon04
источник

1

Большое спасибо за ваш ответ. Хотя это не решило проблему, но помогло мне найти модуль нарушителя спокойствия и сообщить его автору о проблеме.

lucifer63 05

2

Как решить эту проблему в Angular8

polyfills.ts раскомментируйте, import 'classlist.js'; а import 'web-animations-js';затем установите две зависимости, используя npm install --save classlist.jsи npm install --save web-animations-js.

обновить tsconfig.jsonс"target":"es5",

затем ng serveзапустите приложение и откройте в IE, оно будет работать

Rijo
источник

1

Раскомментируйте раздел IE в src / polyfill.js,

/ ** IE10 и IE11 требуют следующего для поддержки NgClass в элементах SVG * /

import 'classlist.js';
Если возникла ошибка сборки для отсутствующего пакета, тогда

npm install classlist.js - сохранить точный
Обязательно укажите строку ниже, чтобы установить режим документа IE по умолчанию. В противном случае он откроется в версии 7.

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />

Судхир Мухаммед
источник

0

Я пробовал все решения в этом потоке, а также кучу других, но безуспешно. В конечном итоге я решил это исправить, обновив каждый пакет в моем проекте, включая ГЛАВНЫЕ изменения версии. Так:

Запуск npm устарел
Обновите package.json, указав в результатах номер, указанный в текущем столбце (это может нарушить работу вашего проекта, будьте осторожны)
Запустите npm install
Убедитесь, что у меня также были раскомментированные полифилы, как указано в других ответах.

Вот и все. Хотел бы я точно определить, какая библиотека была виновата. Фактическая ошибка, которую я получал, была «Синтаксическая ошибка» в vendor.js в Angular 6.

Иордания
источник

0

Angular 9 из коробки теперь должен работать абсолютно нормально в IE11.

Я попробовал все перечисленные здесь предложения, и ни одно из них не сработало. Однако мне удалось отследить его до конкретной библиотеки, в которую я импортировал app.module( ZXingScannerModuleесли быть точным). Если ваше приложение не работает в IE11 на первой странице, попробуйте удалить библиотеки по одной и проверьте в IE11 - он был полностью пропущен во всех моих предупреждениях об ошибках сборки. Если вы обнаружите, что это так, рассмотрите возможность разделения области вашего сайта, которая использует эту библиотеку, в качестве модуля с отложенной загрузкой.

Эндрю Джуниор Ховард
источник

Angular 2/4/5 не работает в IE11

Ответы:

Ноты