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

Я намагаюся з'ясувати, чому мій додаток 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?

Дякую!

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

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

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

Щоб досягти цього, увійдіть 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.

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

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

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

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

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

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

Станом на лютий 2017 року

Використовуючи проект Angular-Cli , всі рядки у polyfills.tsфайлі вже були коментовані, тому всі поліфауни вже використовувались.

Я знайшов це рішення тут , щоб виправити мою проблему.

Підсумовуючи вищенаведене посилання, IE не підтримує лямбда-стрілку / жирову стрілку, які є функцією es6 . ( Це якщо polyfills.ts не працює для вас ).

Рішення : вам потрібно націлити es5, щоб він працював у будь-якій версії IE, підтримка цього була введена лише в новому браузері Edge Microsoft.

Це можна знайти у розділі src/tsconfig.json:

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

Вам потрібно буде відкоригувати файл 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';

Для мене з 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. Відміняйте коментар щодо імпорту у файл 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 і відправте свою заявку та перевірте :)

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

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

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

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

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

У мене є додаток 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 кроки вирішать вашу проблему. Будь ласка, повідомте мене, якщо щось там буде. Дякую!!!

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

import 'core-js/es7/object';

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

import 'core-js/es7/array'

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

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

змінюючись tsconfig.json

"target":"es5",

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

Для мене працювало те, що я дотримувався наступних кроків, щоб поліпшити роботу програми в 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';

У 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`.

Якщо жодне з інших рішень не працює для вас, варто вивчити джерело проблеми. Це може бути, ніж модуль 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, проблема була вирішена.

Як вирішити цю проблему в 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. Відмінити розділ 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" />

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

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

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

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

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