Как сделать Angular 8 совместимым с IE11?

Question

Я обновился до Angular 8, используя ng update.Он запустил свои скрипты миграции, которые (среди прочего) удалили импорт es6 / es7 в polyfills.ts.Из того, что я прочитал, Angular создаст специальную сборку для старых браузеров (включая IE11), и мне больше не нужно беспокоиться о полифиллах?Я обновил browserlist, чтобы он стал not IE 9-10 вместо not IE 9-11, чтобы (я полагаю) намекнуть, что он должен создавать соответствующие полифилы.

К сожалению, после запуска ng build я получаю некоторые ошибки, связанные с полифилами,например.Reflect.getMetadata is not a function и Object doesn't support property or method 'includes'.Я попытался поместить reflect и array импорт обратно в полифиллы и обойти эти ошибки, но я получаю другие.В чем дело?Я должен включать полифилы или нет?

Как заставить Angular 8 работать с IE11?

Answer 1

Один из способов заставить IE 11 работать с Angular 8 - отключить дифференциальную загрузку .

Выполните следующие действия:

1. Обновление tsconfig.json с "target": "es5"
2. Обновление polyfills.ts с import 'core-js'; // core-js@^3.1.4

Answer 2

Если вы хотите использовать свое приложение в браузерах ES5, таких как IE11, а также в современных браузерах ES2015 +, таких как Chrome и Firefox, добавьте дополнительную конфигурацию сборки в angular.json для обслуживания пакета ES5 вашего приложения.

1. Добавить новую конфигурацию "es5" в раздел architect angular.json:

{
  "projects": {
    "my-app": {
      "architect": {
        "build": {
          "configurations": {
            "es5" : {
              "tsConfig": "tsconfig.app.es5.json"
            }
          }
        },
        "serve": {
          "configurations": {
            "es5": {
              "browserTarget": "my-app:build:es5"
}}}}}}}

2. Создать tsconfig.app.es5.json рядом с angular.json:

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

3. Обновление browserlist для включения поддержки IE 11. Убедитесь, что список браузеров находится в корневом каталоге вашего приложения вместе с файлом angular.json. Например:

not IE 9-10 # For IE 9-11 support, remove 'not'.
IE 11

4. Добавьте новый сценарий запуска в package.json, чтобы использовать конфигурацию ES5, созданную на шаге 1:

"scripts": {
  "start": "ng serve",
  "startES5": "ng serve --configuration=es5"
}

Теперь вы можете протестировать связанную версию ES5 вашего приложения в IE 11 с npm run startES5 и версию ES2015 в современных браузерах, таких как Chrome с npm start.

Answer 3

Я решил свои проблемы с полифилом в IE11, выполнив следующие действия:

1. Запустите npm install --save web-animations-js
2. Uncomment line import 'web-animations-js' внутри polyfill.ts
3. Измените целевое значение с «es2015» на «es5» внутри tsconfig.json.

IE11 требует 'es5'