Как мне поддержать Internet Explorer в приложении Angular 8?

Question

Как мне поддержать 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"
    ]
  }
}

РЕДАКТИРОВАТЬ:

browserlists:

# 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)(указывает на компонент приложения)

Что еще мне нужно сделать?

86

angular angular-cli angular8 polyfills

Источник

user2689888 30 май '19 в 13:13

3 ответа

Другие вопросы по тегам angular angular-cli angular8 polyfills

user8397697 13 июн '19 в 06:43 2019-06-13 06:43 · Answer 1 · 2019-06-13 06:43

Согласно этому вопросу ответ

Вам необходимо выполнить следующие шаги

Создайте новый tsconfig tsconfig.es5.json рядом с tsconfig.json со следующим содержимым

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

В angular.json Под projects:yourAppName:architect:build:configurations, добавлять

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

а также projects:yourAppName:architect:serve:configurations добавлять

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

Не забудьте изменить yourAppName в app: 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"
    }
  }
},

Запустите службу с этой конфигурацией, используя команду ниже.

ng serve --configuration es5

user2017472 18 июл '19 в 07:06 2019-07-18 07:06 · Answer 2 · 2019-07-18 07:06

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

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

31

Источник

user2017472 18 июл '19 в 07:06

user5440323 17 сен '19 в 15:27 2019-09-17 15:27 · Answer 3 · 2019-09-17 15:27

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

Вам нужно изменить 2 файла, polyfills.ts а также tsconfig.json соответственно.

Просто добавьте полифиллы браузера в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 измените "target" на es5 вот так

 "target": "es5",

вместо того

"target": "es2015",

user11579548 30 май '19 в 17:47 2019-05-30 17:47 · Answer 4 · 2019-05-30 17:47

Примечание: мой оригинальный ответ был от Reddit ( https://www.reddit.com/r/Angular2/comments/buup6a/)

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

По сути, компиляция для производства создаст обе версии для новых и старых браузеров, таких как IE11

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

user4704261 30 май '19 в 16:29 2019-05-30 16:29 · Answer 5 · 2019-05-30 16:29

Для полной поддержки IE нам нужно было извлечь специальный набор polyfills из библиотеки 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.

user9127418 09 июл '20 в 22:55 2020-07-09 22:55 · Answer 6 · 2020-07-09 22:55

Я просто хочу добавить то, что мне пригодилось:

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

Короче говоря, если вы не хотите больше читать, я предпринял следующие шаги:

Не комментируйте некоторые импортированные файлы в файле polyfill.ts.
import 'classlist.js';
импортировать "веб-анимации-js";
Установите пару пакетов npm.

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

Измените файл списка браузеров. В конце файла найдите эту строку:
not IE 9-11 # Для поддержки IE 9-11 удалите "not".

Удалите слово "не".

Дополнительно просто добавьте браузерные полифиллы в 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измените "target" на es5 вот так

"target": "es5",

вместо того

"target": "es2015",

Пробег:

ng serve --open

Надеюсь, это поможет вам:)

user12080473 04 мар '20 в 22:08 2020-03-04 22:08 · Answer 7 · 2020-03-04 22:08

У меня была аналогичная проблема, и я решил ее с помощью двух исправлений ниже. Возможно, вы встречали много сообщений, в которых упоминается полифил, но это не единственная причина, по которой IE не работает должным образом.

Решение

Добавьте свойство es5BrowserSupport: true в файл angular.json. Путь показан на изображении.

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

Полное объяснение можно найти здесь

Применив эти два исправления, IE начнет работать в локальном (отладка) и производственном режиме.

user12219907 02 янв '20 в 15:23 2020-01-02 15:23 · Answer 8 · 2020-01-02 15:23

Вам нужно всего лишь три изменения в Angular 8. изменить polyfills.ts и tsconfig.json. Добавьте новый файл tsconfig-es5.json с содержимым ниже..

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

измените цель в tsconfig.json как "target": "es5",

выполните следующую команду "ng serve"

2

Источник

user12219907 02 янв '20 в 15:23

user272180 15 июл '19 в 23:52 2019-07-15 23:52 · Answer 9 · 2019-07-15 23:52

Установлен target в "es5" настройте свой browserslist, этого должно быть достаточно.

Подробнее по теме здесь: https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/

2

Источник

user272180 15 июл '19 в 23:52

user3110099 28 окт '19 в 03:53 2019-10-28 03:53 · Answer 10 · 2019-10-28 03:53

Это очень крутая новая функция 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 атрибут для лагентных браузеров.

Следовательно, Angular cli изящно сгенерирует его на prod. Но если ты хочешь бежатьng serve из локального, то вам нужно вручную убедиться ng serve выполняется из файла tsconfig, имеющего target: es5

user491436 01 июн '19 в 23:17 2019-06-01 23:17 · Answer 11 · 2019-06-01 23:17

Это действительно беспокоило меня, поэтому я написал скрипт nodeJs, который включит "обходной путь", определенный здесь: ng github

Будучи корпоративным разработчиком, который выпускает тонны угловых приложений, разработка локально не только для Chrome и Firefox. Любой, кто занимался разработкой веб-приложений больше минуты, знает, что только потому, что в Chrome он выглядит круто, это не значит, что IE будет счастлив. ОК, просто установите скрипт и время от времени обслуживайте его в IE, а затем локально проверяйте свое приложение в IE, прежде чем нажимать на dev.

user1338309 14 сен '20 в 12:11 2020-09-14 12:11 · Answer 12 · 2020-09-14 12:11

Шаг 1. Отмените комментирование plyfills в polyfills.ts. Также запустите все команды установки npm, указанные в файле polyfills.ts, чтобы установить эти пакеты.

Шаг 2. В файле списка браузеров удалите не там, где упоминается поддержка IE 9-11

Шаг 3. В файле tsconfig.json измените "target": "es2015" на "target": "es5"

Эти шаги устранили мою проблему

user12473681 11 дек '19 в 22:47 2019-12-11 22:47 · Answer 13 · 2019-12-11 22:47

Что насчет обновления включенного browserslist и удалите notперед ʻIE 9-11 ...? нравится?

Этот файл используется системой сборки для настройки вывода CSS и JS для поддержки указанных ниже браузеров. Дополнительную информацию о формате и параметрах правил см. На https://github.com/browserslist/browserslist.

Вы можете увидеть, какие браузеры были выбраны вашими запросами, запустив:

npx browserslist

0,5% последние 2 версии Firefox ESR не мертв IE 9-11 # Для поддержки IE 9-11 удалите "not".