Подтвердить что ты не робот

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

Я пытаюсь выяснить, почему мое приложение 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?

Спасибо!

4b9b3361

Ответ 1

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


Заметки

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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

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

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

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

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

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

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

Ответ 6

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

в index.html add:

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

в 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';

Ответ 7

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

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

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

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

enter image description here

Ответ 8

  1. Откомментируйте некоторые операции импорта в файле 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';

Ответ 9

По состоянию на сентябрь 2017 года (node version = v6.11.3, npm version = 3.10.10), это то, что сработало для меня (спасибо @Zze):

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

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

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

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

Ответ 10

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

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

Ответ 11

У меня есть приложение 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 шага решат вашу проблему, пожалуйста, дайте мне знать, если что-нибудь будет там. Спасибо!!!

Ответ 12

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

<script src="https://npmcdn.com/[email protected] 
 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';

Ответ 13

В 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'.

Ответ 14

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

"target":"es5",

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

Ответ 15

Если ни одно из других решений не работает для вас, стоит изучить источник проблемы. Это может быть, чем модуль 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, проблема была решена.

Ответ 16

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

import 'core-js/es7/object';

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

import 'core-js/es7/array'

Ответ 17

У меня тоже такая же проблема в угловом приложении для размещения приложений Windows IIS,

Chrome Работает отлично, Edge Working Fine, но IE11, когда я обновляю угловое приложение, - это ошибка 404 - файл или каталог не найдены.

Все, что мне нужно сделать.

Это мой файл 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';

мой файл IIS web.config

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/app/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Ответ 18

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

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

Это. Я хотел бы точно определить, какая библиотека была виновником. Фактическая ошибка, которую я получал, была "Синтаксическая ошибка" в vendor.js в Angular 6.

Ответ 19

Ответ заключается в том, чтобы использовать 2.0.0-beta.0 на данный момент.