Как исправить ваше Angular приложение, когда оно не работает в IE11 

Хотя Internet Explorer 11 уже давно устарел, Microsoft по-прежнему предоставляет обновления безопасности и техническую поддержку. Однако IE11 не поддерживает много новых функций, которые уже работают в других браузерах, таких как Google Chrome, или которые появятся в будущем. Вот почему необходимо использовать полифилы, если вы все еще хотите, чтобы ваше приложение работало в IE11.

Иногда ваше приложение может выдавать ошибки в IE11, даже если оно нормально работает в других браузерах. Может быть множество причин, по которым ваше приложение Angular не работает.

Отсутствующие Polyfills для устаревших браузеров (IE11)

IE11 нуждается в полифилах, поскольку он не поддерживает ES2015 и более поздние функции. Файл polyfills.ts, который присутствует в каждом Angular проекте, это правильное место, чтобы импортировать весь необходимый polyfills. Некоторые полифиллы могут быть закомментированы, поскольку современные браузеры не нуждаются в них, поэтому вам необходимо удалить комментарии. Кроме того, вам может понадобиться установить дополнительные полифиллы, чтобы обеспечить поддержку функций, которые не поддерживает IE11 (например, пользовательские свойства CSS).

/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
*   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
*   2. Application imports. Files imported after ZoneJS that should be loaded before your main
*      file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/

/***************************************************************************************************
* BROWSER POLYFILLS
*/

/** IE10 and IE11 require 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';

/** IE10 and IE11 requires the following to support `@angular/animation`. ALL Firefox browsers require the following to support `@angular/animation`. **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone';  // Included with Angular CLI.

/***************************************************************************************************
* APPLICATION IMPORTS
* You can include your own polyfills here (e.g. CSS custom properties).
*/

Дифференциальная загрузка полифилов

Начиная с Angular CLI 8, появилась новая функция, называемая дифференциальной загрузкой. Если вы обновились через интерфейс командной строки, ng serve по умолчанию будет запущен ES2015, который IE11 и более старые браузеры не поддерживают. При запуске прод сборки вы получите два вида пакетов: один для современных браузеров и один для устаревших браузеров, таких как IE11. Это означает, что современным браузерам придется загружать меньше данных, поскольку они поддерживают новейшие функции ES из коробки. Помните, что следующие шаги необходимы только для разработки, а не для развертывания. Вот как вы можете работать в IE11 при разработке:

1. Добавьте новый файл tsconfig-es5.app.json.
2. Обновите конфигурацию angular.json.
3. Запуск приложения: ng serve --configuration es5. Я рекомендую для удобства добавить скрипт запуска package.json.

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

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

Заключение

Спасибо за чтение этой части. Как видите, при тестировании приложения в IE11 есть несколько ошибок. Хотя описанные шаги предназначены для приложений Angular, идеи решений работают и для других сред.