Кутовий 2/4/5 не працює в IE11


124

Я намагаюся з'ясувати, чому мій додаток 2 у куті застряг у відображенні "Завантаження ..." під час запуску в IE 11.

За чиєюсь пропозицією, я спробував цей планкер, розміщений ким-то на переповнення стека, як на хромі, так і на 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?

Дякую!


Відповідь - використовувати 2.0.0-beta.0 зараз.
Pat Bone Crusher Laplante

Відповіді:


187

Остання версія програми angular - це налаштування лише для вічнозелених браузерів за замовчуванням ...

Поточна установка призначена для так званих "вічнозелених" браузерів; останні версії браузерів, які автоматично оновлюються. Сюди входить Safari> = 10, Chrome> = 55 (включаючи Opera), Edge> = 13 на робочому столі та iOS 10 та Chrome для мобільних пристроїв.
Сюди ж відноситься і firefox, хоча це не згадується.

Дивіться тут для отримання додаткової інформації про підтримку веб-переглядача разом зі списком запропонованих поліфаулів для конкретних браузерів. https://angular.io/guide/browser-support#polyfill-libs


Це означає, що вам потрібно вручну ввімкнути правильні поліфази, щоб отримати кутовий робочий рівень в IE11 і нижче.


Щоб досягти цього, увійдіть polyfills.tssrcпапці за замовчуванням) і просто скаментуйте наступний імпорт:

/***************************************************************************************************
 * 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.


3
Мій кутовий проект 5 також має таку ж помилку, навіть якщо я прокоментував polyfill для IE, все ще не може працювати в браузері IE. Занадто дивно ....
Еббі

Відмініть весь згаданий імпорт, а також імпорт NgClass нижче цього. Нарешті встановіть "npm install --save classlist.js". Це спрацювало в моєму випадку.
Вайбхав

2
@dudewad Я експериментував зі створенням двох окремих пакетів, один явно для IE11, а потім загортав цей пакет в умовний коментар IE, який би перестав його проникати в хром.
Zze

1
@Zze добре, це, безумовно, всебічно. Приємно, мені це подобається.
dudewad

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

22

У мене було саме таке питання, і жодне з рішень не працювало на мене. Натомість додайте наступний рядок у (homepage) .html під <head>виправленим.

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

Враховуючи інформацію цього SO stackoverflow.com/questions/26346917/… , рекомендація щодо використання сумісного з X-UA видається недійсною.
Любилюк

19

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

Додайте наступний скрипт у свій HTML:

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

Це вирішило проблему для мене. Щоб отримати докладніші відомості, ви можете ознайомитися з проблемою github тут: https://github.com/angular/angular/isissue/7144


2
це рішення не спрацювало для мене :( ... [у проекті VS2015, що працює в IE]
Ceylan Mumun Kocabaş

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",

Ця відповідь є дуже оманливою. Поліфайли - це сценарії, які роблять сумісність IE 9 і вище зі стандартами ES6, як видно тут: angular.io/docs/ts/latest/guide/browser-support.html Отже, не має значення, чи браузер спочатку підтримує функції стрілок, поліфіли повністю пом'якшують це питання.
Zze

8
Як те, що я пережив у своїй справі ... вводить в оману? Поліфайли вже були коментовані, і вони не вирішили проблему, яку я відчував у IE11. Навряд чи подумайте, що це гідне протидії.
MikeDub

Перечитавши це, я розумію, що ви намагаєтесь сказати, але спосіб, яким він наразі формулюється, звучить так, що вам потрібно вручну змінити всі ваші .tsфайли від використання жирової стрілки на анон функцій. Я думаю, що вам слід відірвати цитату з цього посилання про те, чим відрізняється вихід компілятора, якщо ви зміните ціль скрипту ecma, яка відтепер зменшує проблему.
Zze

5
Крім того, я вже націлюю на es5 у своєму tsconfig, і у мене все ще є проблеми.
gh0st

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

Встановлення npm Pacakages Примітка. У коментарях є кілька команд встановлення npm. Якщо ви використовуєте ранню версію Angular CLI, може бути і третя. Для кутових версій CLI 7, 6 та 1.7 вам потрібно запустити:

npm install --save classlist.js

npm install - зберегти веб-анімації-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 за замовчуванням активний лише мінімальний набір імпорту (адже він націлений на так звані "вічнозелені" браузери; останні версії браузерів, які автоматично оновлюються ).


8

EDIT 2018/05/15 : цього можна досягти метатегом ; будь ласка, додайте цей тег до свого index.html і нехтуйте цією публікацією.

Це не повна відповідь на питання (технічну відповідь див. У відповіді @ Zze вище ), але важливий крок, який потрібно додати:

РЕЖИМ СУМІСНОСТІ

Навіть при наявності відповідних поліфілів, все ще виникають проблеми із запуском програм Angular 2+, які використовують поліфункції на IE11. Якщо ви запускаєте сайт із хоста інтрамережі (тобто, якщо ви тестуєте його за адресою http: // localhost або іншим зіставленим локальним доменним іменем), потрібно перейти до налаштувань перегляду сумісності та зніміть прапорець "Відобразити сайти інтрамережі у перегляді сумісності", оскільки перегляд сумісності IE11 порушує пару умов, включених до поліфілів ES5 для Angular.

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


1
Якщо ви дотримуєтеся цього рішення, ви повинні зробити це на всіх клієнтах, які виконують вашу заявку. Додавання спеціального тегу до вашого html-файлу змушує браузер працювати в останній доступній версії замість режиму сумісності. Зверніться до наступної відповіді, щоб знайти тег: stackoverflow.com/a/47777695/4628364
Полі

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 частини без коментарів, але вона все ще не працює, у вас є інше рішення
Menna Ramadan,

5

Якщо у вас все ще виникають проблеми з тим, що не всі функції JavaScript працюють, додайте цей рядок у ваші поліфілі. Він виправляє метод відсутніх значень:

import 'core-js/es7/object';

І цей рядок виправляє відсутній метод "включає":

import 'core-js/es7/array'

4

У мене виникла та сама проблема, якщо ви ввімкнули відображення сайтів інтрамережі в розділі сумісності Перегляд polyfills.ts не працюватиме, вам все одно потрібно додати наступний рядок, як було сказано.

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


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, проблема була вирішена.


1
Велике спасибі за вашу відповідь. Незважаючи на те, що вона не вирішила проблему, вона допомогла мені знайти модуль виправлення неполадок та повідомити автора про проблему.
lucifer63

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, вона буде працювати


1
  1. Відмінити розділ IE у src / polyfill.js,

    / ** IE10 та IE11 вимагає наступного для підтримки NgClass для елементів SVG * /

    імпортувати 'classlist.js';

  2. Якщо будь-яка помилка складання для відсутнього пакету,

    npm встановити classlist.js - точно зберегти

  3. Не забудьте включити нижче рядок, щоб встановити режим документа IE за замовчуванням. Інші мудрі вони відкриються у версії 7

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

0

Я намагався будь-яке рішення в цій темі, а також купу інших, не маючи успіху. Це для мене виправило це оновлення кожного пакету в моєму проекті, включаючи ОСНОВНІ зміни версій. Так:

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

Це воно. Я б хотів, щоб я міг точно визначити, яка бібліотека була винуватою. Дійсною помилкою, яку я отримував, було "Помилка синтаксису" в vendor.js у Angular 6.


0

Кутовий 9 з коробки повинен працювати абсолютно добре в IE11 зараз.

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.