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

Ответ 1

По этому вопросу ответ

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

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

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

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

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

и projects:yourAppName:architect:serve:configurations добавить

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

Не забудьте изменить ваше AppName в приложении: 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

Ответ 2

Примечание: мой оригинальный ответ был от 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 и вуаля!

Ответ 3

Для полной поддержки 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.

Ответ 4

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

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

Ответ 5

Есть новости о решении этой проблемы?

Я сталкиваюсь с той же проблемой, работая с решением ядра .net и Angular 8 (обновлен с 7), и он все еще не работает.

Ответ 6

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

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

Ответ 7

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

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

Ответ 8

ни одно из этих предложений не работает для Angular 8 в IE11, у меня есть простой веб-компонент hello world, и он не работает без ошибок в IE11. Там должно быть какое-то реальное решение там, верно?