Угловой 2/4/5 не работает в IE11

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

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

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

   document.write(''); Router Sample          System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'src': {defaultExtension: 'ts'}} }); System.import('src/boot') .then(null, console.error.bind(console));    loading...   

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

Спасибо!

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

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

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


    Это означает, что вам необходимо вручную включить правильные полиполки, чтобы получить работу с угловым в 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 свойство до tsconfig.json в @MikeDub предложению @MikeDub . Это означает изменение результата компиляции любых определений es6 определений es6 . Например, функции стрелок жира ( ()=>{} ) будут скомпилированы для анонимных функций ( function(){} ). Здесь вы можете найти список поддерживаемых браузером es6.


    Заметки

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

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

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

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

      

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

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

      

    Вам необходимо настроить файл 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'; 

    По состоянию на сентябрь 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 сломается.

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

    EDIT 2018/05/15 : это может быть достигнуто с помощью метатега ; добавьте этот тег в свой index.html и проигнорируйте это сообщение.

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

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

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

    введите описание изображения здесь

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

    в index.html add:

      

    в src \ polyfills.ts uncomment :

     /** 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'; 

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

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

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

    Чтобы обобщить приведенную выше ссылку, IE не поддерживает функции стрелки стрелки / жира lambda, которые являются особенностью es6 . ( Это, если polyfills.ts не работает для вас ).

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

    Это можно найти в src/tsconfig.json :

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

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

      

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

       

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

     import 'core-js/client/shim'; 

    В 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.0.0-beta.0.

    Давайте будем гением компьютера.