Internet Explorer 11 и Angular 2+

IE 11 и Angular не всегда сочетаются друг с другом. Я должен сказать, что команда разработчиков Angular и сообщество оказывают поддержку. Но есть вещи, которые разработчики Angular не могут исправить.

Я составил небольшой список проблем, с которыми я столкнулся при разработке приложения Angular 5 для клиента IE 11.

Во-первых, если вас когда-либо попросят поддержать IE, отговорите своего клиента / менеджера / клиента от этого. Покажите им этот пост в блоге, покажите им ссылки, покажите им эту ошибку IE, которая все еще открыта спустя 4 года. Настоятельно не советую. Обратите внимание, что следующие современные технологии не поддерживаются в IE11:

• Веб-сборка (WASM)
• CSS Grid (ошибки)
• Flexbox (ошибки)
• Плохая работа
• WEBM
• Сервисные работники (PWA)
• Веб-анимация

Кроме того, в 2013 году был выпущен IE11.

Если вы не преуспели в выполнении первой задачи, мои соболезнования, вот несколько общих проблем, которые вам следует иметь в виду при поддержке IE в разработке Angular.

Инструменты разработчика F12

При использовании инструментов разработчика IE11 Angular выдает ошибку Невозможно выполнить код из освобожденного скрипта. »

Самый эффективный способ исправить это - включить перекрестную проверку контекста в Zone.js. Поместите эти строки в свой файл polyfills.ts:

/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
//(window as any).__Zone_enable_cross_context_check = true;
if (document['documentMode'] || /Edge/.test(navigator.userAgent)) {
    (window as any).__Zone_enable_cross_context_check = true;
}

ngForm valueChanges запускается при загрузке страницы

Если вы используете ввод Angular Reactive Form с заполнителем, вы можете столкнуться с тем, что поля изначально загрязнены при загрузке страницы. Это связано с ошибкой в ​​IE и не будет исправлено в ближайшее время.

A̵ ̵w̵o̵r̵k̵a̵r̵o̵u̵n̵d̵ ̵w̵o̵u̵l̵d̵ ̵b̵e̵ ̵t̵o̵ ̵’̵e̵n̵a̵b̵l̵e̵’̵ ̵y̵o̵u̵r̵ ̵f̵o̵r̵m̵ ̵a̵f̵t̵e̵r̵ ̵t̵h̵e̵ ̵c̵o̵m̵p̵o̵n̵e̵n̵t̵ ̵h̵a̵s̵ ̵f̵i̵n̵i̵s̵h̵e̵d̵ ̵v̵i̵a̵ ̵t̵h̵e̵ ̵O̵n̵I̵n̵i̵t̵ ̵a̵n̵d̵ ̵A̵f̵t̵e̵r̵V̵i̵e̵w̵C̵h̵e̵c̵k̵e̵d̵ ̵l̵i̵f̵e̵c̵y̵c̵l̵e̵ ̵h̵o̵o̵k̵s̵,̵ ̵b̵a̵s̵i̵c̵a̵l̵l̵y̵ ̵y̵o̵u̵ ̵s̵e̵t̵ ̵a̵ ̵f̵l̵a̵g̵ ̵t̵o̵ ̵f̵a̵l̵s̵e̵ ̵a̵n̵d̵ ̵f̵l̵i̵p̵ ̵t̵h̵e̵ ̵b̵i̵t̵ ̵a̵f̵t̵e̵r̵ ̵t̵h̵e̵ ̵v̵i̵e̵w̵ ̵w̵a̵s̵ ̵c̵h̵e̵c̵k̵e̵d̵.̵ ̵

T̵h̵i̵s̵ ̵d̵o̵e̵s̵ ̵n̵o̵t̵ ̵c̵o̵m̵p̵l̵e̵t̵e̵l̵y̵ ̵e̵l̵i̵m̵i̵n̵a̵t̵e̵ ̵t̵h̵e̵ ̵i̵s̵s̵u̵e̵,̵ ̵b̵u̵t̵ ̵i̵t̵ ̵s̵h̵o̵u̵l̵d̵ ̵p̵r̵o̵v̵i̵d̵e̵ ̵y̵o̵u̵ ̵w̵i̵t̵h̵ ̵a̵ ̵d̵i̵r̵e̵c̵t̵i̵o̵n̵ ̵o̵n̵ ̵h̵o̵w̵ ̵t̵o̵ ̵s̵o̵l̵v̵e̵ ̵i̵t̵.̵

Решение этой проблемы состоит в том, чтобы отложить регистрацию событий «change» и «input» в поле ‹input› до завершения инициализации представления (AfterViewInit) вместе с setTimeout.

Контент Flex плохо выровнен

IE11 сходит с ума, если для гибкости установлено значение auto, установите его на 100%, чтобы получить правильное поведение гибкости.

flex-basis: 100%;

Объект не поддерживает свойство или метод «включает» && Объект не поддерживает свойство или метод «значения»

Для поддержки IE11 (или других старых браузеров) некоторые функции JavaScript должны быть полифилированы.

Чтобы исправить отсутствующий метод «includes», вам нужно поместить эту строку в файл polyfill.ts:

import 'core-js/es7/array';

Чтобы исправить отсутствующий метод «values», вам нужно поместить эту строку в свой файл polyfill.ts:

import 'core-js/es7/object';

Это пример нашего файла polyfill.ts, все, что нам нужно, это включить поддержку IE11:

/**
* 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/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
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';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
import 'core-js/es7/array';
import 'core-js/es7/object';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone';  // Included with Angular CLI.

Объект не поддерживает это действие

Ошибка Объект не поддерживает это действие в IE11 сложно определить. В нашей кодовой базе виноват конструктор для File. Чтобы решить эту проблему, нам пришлось преобразовать Blob в File без вызова конструктора.

private blobToFile = (theBlob: Blob, name: string, fileName: string): File => {
     const blob: any = theBlob;
     blob.lastModifiedDate = new Date();
     blob.name = name;
     blob.fileName = fileName;
     return <File>theBlob;
}

На данный момент это все, мы все еще в разработке для поддержки IE11, поэтому ожидайте, что этот список со временем будет расти.

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

ИЗМЕНИТЬ Февраль 2019 г.

Теперь кажется, что Microsoft не рекомендует разрабатывать для Internet Explorer, поскольку это не путь вперед: https://techcommunity.microsoft.com/t5/Windows-IT-Pro-Blog/The-perils-of-using- Internet-Explorer-as-your-default-browser / ba-p / 331732