Як підтримати Internet Explorer у програмі Angular 8?

Коли я створюю проект за допомогою Angular CLI (8.0.0), я запускаю ng serve, відкриваю програму в Internet Explorer, і перед вами з'являється порожній екран.

Я подивився polyfills.tsфайли і прокоментував такі рядки:

    import 'classlist.js';
    import 'web-animations-js';

Я також видалив усі імпорти core.js, оскільки Angular 8 безпосередньо підтримує core.js 3.0.

Я також біг npm i.

package.json:

"dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "classlist.js": "^1.1.20150312",
    "rxjs": "~6.4.0",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.800.0",
    "@angular/cli": "~8.0.0",
    "@angular/compiler-cli": "~8.0.0",
    "@angular/language-service": "~8.0.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  }

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

РЕДАГУВАТИ:

списки браузерів:

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.

РЕДАКТУВАТИ 2:

На консолі Internet Explorer (11) відображаються такі помилки:

polyfills.js: Syntax error (3168, 5) (рядок 3168 на початку) ->class Zone {

vendor.js: Syntax error (156, 1) (рядок 156 починається) ->class PlatformLocation {

main.ts: Syntax error (95, 20) (вказує на AppComponent)

Що ще мені потрібно зробити?

Відповідно до цього питання відповідь

Вам потрібно виконати наступні кроки

1. Створіть новий tsconfig tsconfig.es5.json поруч із tsconfig.json із вмістом нижче

{
 "extends": "./tsconfig.json",
 "compilerOptions": {
     "target": "es5" 
  }
}

2. В angular.json Under projects:yourAppName:architect:build:configurations, додати

"es5": {
      "tsConfig": "./tsconfig.es5.json"
    }

і projects:yourAppName:architect:serve:configurationsдодати

    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }

Не забудьте змінити yourAppName у додатку: build: es5 на yourAppName !

повний шлях, показаний нижче

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
      ...
  },
  "configurations": {
    "production": {
        ...
    },
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
  }
},
"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "yourAppName:build:es5"
    }
  }
},

3. Запустіть службу з цією конфігурацією, використовуючи команду нижче.

ng serve --configuration es5

Перейдіть до "tsconfig.json" і використовуйте target: "es5" замість "target": "es2015",

ціль, яка знаходиться всередині compileOnSave \ compilerOptions

------ Простий і легкий спосіб

Вам потрібно змінити 2 файли polyfills.tsі tsconfig.jsonвідповідно.

Просто додайте Polyfill браузера вpolyfills.ts

/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
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';

і в tsconfig.json зміні "ціль" на es5, як це

 "target": "es5", 

замість

"target": "es2015",

Примітка: моя оригінальна відповідь була від Reddit ( https://www.reddit.com/r/Angular2/comments/buup6a/ )

Перевірте свій tsconfig.json Під час оновлення до Angular 8 ціль для мене змінилася на es2015, тому з ng serve я зіткнувся з багатьма проблемами. Під час компіляції папка dist мала версії es5 та es2015.

В основному, компіляція для виробництва створить обидві версії для нових і старих браузерів, таких як IE11

Щоб протестувати IE11 у середовищі розробки, я створив середовище dev в angular.json, де вказав копію tsconfig, яку я назвав tsconfig.dev.json, де ціллю встановлено es5. Запустіть ng s -c = dev та voilá!

Для повноцінної підтримки IE нам довелося застосувати спеціальний набір поліфілів із бібліотеки mdn-polyfills .

Для їх встановлення використовуйте

npm i -s mdn-polyfills

далі додайте їх у файл polyfills.ts таким чином

import 'mdn-polyfills/Object.assign';
import 'mdn-polyfills/Object.create';
import 'mdn-polyfills/Object.entries';
import 'mdn-polyfills/Array.from';
import 'mdn-polyfills/Array.of';
import 'mdn-polyfills/Array.prototype.find';
import 'mdn-polyfills/Array.prototype.forEach';
import 'mdn-polyfills/Array.prototype.filter';
import 'mdn-polyfills/Array.prototype.findIndex';
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/String.prototype.includes';
import 'mdn-polyfills/String.prototype.repeat';
import 'mdn-polyfills/String.prototype.startsWith';
import 'mdn-polyfills/String.prototype.endsWith';
import 'mdn-polyfills/String.prototype.padStart';
import 'mdn-polyfills/String.prototype.padEnd';
import 'mdn-polyfills/Function.prototype.bind';
import 'mdn-polyfills/NodeList.prototype.forEach';
import 'mdn-polyfills/Element.prototype.closest';
import 'mdn-polyfills/Element.prototype.matches';
import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';

після цього вам слід припинити відчувати багато проблем в IE.

Встановіть target"es5", налаштуйте свій browserslist, цього повинно бути достатньо.

Детальніше про тему читайте тут: https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/

Вам просто потрібно три зміни в кутовій 8. змініть polyfills.ts та tsconfig.json. Додайте новий файл під назвою tsconfig-es5.json із вмістом нижче.

{
 "extends": "./tsconfig.json",
 "compilerOptions": {
 "target": "es5" 
 }
 }

змінити ціль у tsconfig.json як "ціль": "es5",

виконати наступну команду "ng serve"

У мене була подібна проблема та вирішено за допомогою двох наведених нижче виправлень. Можливо, ви стикалися з багатьма повідомленнями, в яких згадувалося про polyfill, але це не єдина причина, через яку IE не працює належним чином.

Рішення

Додайте властивість "es5BrowserSupport": true у файлі angular.json. Шлях показаний на зображенні.

Тепер змініть цільову властивість на " es5 " у файлі tsconfig.json

Повне пояснення можна знайти тут

Застосовуючи ці два виправлення, IE почне працювати локально (налагодження) та у виробництві.

Я просто хочу додати щось корисне для мене:

1. Прочитайте цю статтю з офіційної кутової документації: https://angular.io/guide/browser-support
2. Ще одна стаття, яка допоможе вам у процесі: https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
3. Для мене найкраща стаття, яка допомогла мені зрозуміти все, навіть дві попередні: https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1

Коротше кажучи, якщо ви більше не хочете читати, я зробив такі кроки:

• Скасуйте коментар деяких імпортів у файлі polyfill.ts.

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

  імпортувати 'web-animations-js';

• Встановіть пару пакетів npm.

npm install --save classlist.js npm install --save web-animations-js

• Змініть файл списку браузерів. У кінці файлу знайдіть цей рядок:

  не IE 9-11 # Для підтримки IE 9-11 видаліть "not".

Будь ласка, видаліть слово "не" .

Додатково просто додайте браузер Polyfills у polyfills.ts

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

і в tsconfig.jsonзміні "ціль" на es5, як це

"target": "es5",

замість

"target": "es2015",

Виконати:

ng serve --open

Сподіваюся, це може вам допомогти :)

Це мене дуже турбувало, тому я написав скрипт nodeJs, який дозволить визначити тут "обхідний шлях": ng github

Будучи корпоративним розробником, який виявляє безліч кутових додатків, не можна робити розробку локально лише для chrome та firefox. Той, хто робить веб-розробник більше хвилини, знає, що те, що це виглядає круто в chrome, не означає, що IE буде щасливим. Гаразд, просто встановіть скрипт і подавайте його в IE час від часу та перевіряйте свій додаток в IE локально, перш ніж натискати на dev.

Це дуже крута нова функція Angular, яка називається диференціальним навантаженням

<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
<script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script>
<script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
<script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
<script src=“main-es2015.63808232910db02f6170.js” type=“module”></script>
<script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>

Якщо ви бачите вище index.html із папки збірки, кожен js має дві версії:

• Одним з них є es2015 з type="module"атрибутом для сучасних браузерів
• Ще одна версія es5 з nomoduleатрибутом для браузерів lagency.

Таким чином, Angular cli буде витончено генерувати його на prod. Але якщо ви хочете запустити ng serveз локального, вам доведеться вручну переконатися, що ng serveвін запущений із файлу tsconfig, який маєtarget: es5

Крок 1: Скасуйте коментарі plyfills у polyfills.ts. Також запустіть усі команди встановлення npm, згадані у файлі polyfills.ts, щоб встановити ці пакети

Крок 2: У списку браузерів видаліть файл, не там, де згадується підтримка IE 9-11

Крок 3: У файлі tsconfig.json змініть файл, наприклад "target": "es2015", на "target": "es5"

Ці кроки виправили мою проблему

А як щодо оновлення включеного browserslistта видалення попереднього notдо `IE 9-11 ...? подобається це?

Цей файл використовується системою збірки для налаштування виводу CSS та JS для підтримки вказаних нижче браузерів. Для отримання додаткової інформації щодо формату та параметрів правил, будь ласка, відвідайте: https://github.com/browserslist/browserslist#queries

Ви можете побачити, які браузери були обрані за вашими запитами, запустивши:

npx browserslist

0,5% останніх 2 версій Firefox ESR не помер IE 9-11 # Для підтримки IE 9-11 видаліть 'not'.