Ъглова: Как да поддържам IE11

В тази статия ще ви покажа стъпките, които предприех, за да поддържам Internet Explorer 11 с Angular. Първата половина от това бързо ще покаже стъпките, които трябва да предприемете, а втората половина ще разбие тези стъпки по-подробно за всеки, който желае да научи повече. В края ще добавя някои допълнителни съвети, които може да се появят в реално приложение.

Нека го свършим

Стъпка 1 - Насочване към ES5

IE11 поддържа само в най-добрия ES5. Затова трябва да актуализираме нашия tsconfig.json. Актуализирайте целевото свойство в compilerOptions, за да съответства на следното, ако не вече:

"compilerOptions": {"target": "es5"}

Стъпка 2 - Актуализирайте списъка с браузъри

Отворете файла на браузъра си и променете реда не IE 9-11, за да съвпадне

не IE 9-10 IE 11

Стъпка 3 - Полифили

Ако вие или някоя от вашите зависимости използвате функции от ES6 +, ще трябва да ги полифилирате. CoreJS е включен с Angular install и може да се използва за по-голямата част от полифилсите, от които се нуждаете.

Отворете своя файл polyfills.ts и поставете следното в горната част под BROWSER POLYFILLS:

Ако имате нужда от бърза победа (НЕ ПРЕПОРЪЧВА):

import 'core-js';

В противен случай се опитайте да разберете какви полифили са ви необходими. Установих, че те обхванаха моя случай на използване:

импортиране 'core-js / es6 / символ'; 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'; импортиране 'core-js / es6 / string'; import 'core-js / es6 / date'; import 'core-js / es6 / regexp'; import 'core-js / es6 / map'; import 'core-js / es6 / slab-map'; импортиране 'core-js / es6 / set'; import 'core-js / es6 / array'; import 'core-js / es7 / array'; // за .includes ()

Следващата част, която трябва да направим, е да намерим следните редове, близо до горната част на polyfills.ts:

/ ** IE10 и IE11 изисква следното за NgClass поддръжка за SVG елементи * / // import 'classlist.js'; // Изпълнете `npm install --save classlist.js`.

Според инструкциите изпълнете: npm install --save classlist.js

и след това декомментирайте импортирането:

/ ** IE10 и IE11 изисква следното за поддръжка на NgClass за SVG елементи * / import 'classlist.js'; // Изпълнете `npm install --save classlist.js`.

Ако използвате Angular Material или AnimationBuilder от @ angular / платформа-браузър / анимации, намерете следния ред:

// импортира 'web-animations-js'; // Изпълнете `npm install - запазване на уеб-анимации-js`.

Декомментирайте декларацията за импортиране и стартирайте npm install --save web-animations-js.

Вашият окончателен файл polyfills.ts трябва да изглежда подобно на:

Завършен

И това е! Трябва да сте добре да отидете!

Може да се натъкнете на допълнителни проблеми. Някои от тях сега ще бъдат разгледани през втората половина на тази статия.

Но защо?

Нека да преминем бързо защо е описана всяка стъпка по-горе, преди да навлезем в някои допълнителни съвети за допълнителни проблеми, които могат да възникнат.

  • Цел ES5: Доста ясен, IE11 поддържа само ES5 или по-ниска версия. Следователно, TypeScript трябва да Транспилира вашия код в съвместим с ES5 код.
  • Браузър: Това е интересно. Трябва да кажем, че поддържаме IE 11, но ако не поддържаме IE 9 или 10, също толкова важно е конкретно да кажем, че не ги поддържаме, в противен случай диференциалният товарач ще включва много guff. _ (Благодаря @wescopeland_ за този съвет) _
  • Полифили - Някои от библиотеките, с които работим, или код, който пишем, разчитат на функции от версии на ECMAScript, които IE11 не поддържа, следователно трябва да предоставим тази функционалност на ES5 ръчно, използвайки обходни решения. Това ще позволи на кода, използващ съвременни функции, да продължи да работи правилно. (Забележка: Всеки полифил ще увеличи размера на пакета, така че бъдете внимателни, когато избирате кои полифили да импортирате)

Някои допълнителни съвети

Добре, мотивацията да напиша тази статия дойде от задачата да поддържа IE11 в нашето приложение за зелено поле. Беше особено болезнено, тъй като беше впоследствие изтъкна проблемите на съвместимостта с поддръжка на IE11:

Зависимостите на трети страни трябва да поддържат ES5

Това стана очевидно бързо, тъй като грешките лесно се изплюха в конзолата. Но това подчерта интересен проблем.

Сега, ако искаме да включим нова зависимост или библиотека в нашето приложение, трябва да сме сигурни, че тя надгражда и поддържа ES5, в противен случай трябва да я прескочим. Това потенциално би могло да ограничи избора ни напред, което никога не е идеално.

IE11 не поддържа CSS персонализирани свойства

Това стана ад бързо. IE11 не поддържа CSS персонализирани свойства като --пример-цвят: син; което означаваше, че нашето тематично решение е потенциално на въжетата.

След много разследване открих, че може да бъде полифилиран, но полифилите, които открих, са бавни, оказват огромно влияние върху размера на пакета и не са напълно перфектни. липсващи функции като множество персонализирани свойства в един ред, сред другите проблеми.

Те също не работиха за конкретния случай на употреба и за нашето тематично решение, което разчиташе на настройката за изпълнение на персонализираните свойства.

Моето решение за това дойде от css-vars-ponyfill, който позволи настройката на глобални потребителски свойства по време на изпълнение. Страхотно

Задаване на атрибута на стил в IE11

IE11 ще позволи само настройката на атрибут на стил DOM Element с CSS Properties, които поддържа. Например, като направите следното:

document.body.style = '- първичен цвят: син; размер на шрифта: 18px ';

води до следното в IE11, губейки --примерния цвят: син.

Проблеми със стилистиката, произтичащи от поддръжката на flexbox

IE11 поддържа flexbox, но е много придирчив как го прави. Забелязах, че ако искам да използвам flex: 1; за да позволя на елемент да запълни оставащото пространство, на IE11 трябваше да настроя пълното свойство flex: flex: 1 0 auto; или нещо подобно.

Изпълнението на DevTools в IE11 влиза в конфликт с zone.js

Да. По някаква причина, когато отворите инструменти за разработка, докато ng обслужването работи на IE11, причинява конфликти с zone.js;

За да коригирате това, трябва да добавите глобална ZONE FLAG за зона, за да изпълните малко допълнителен код.

Правите това в polyfills.ts. Намерете импорта на zone.js и добавете следното, така че да изглежда така:

(прозорец като всеки) .__ Zone_enable_cross_context_check = true; импортиране 'zone.js / dist / zone'; // Включва се с Angular CLI.

Заключение

Не се забавлявах, опитвайки се да накарам това да работи през седмицата. Сега, когато го поддържам; Чувствам се доста изпълнен . Надявам се тази статия да спести на някого болка в бъдеще!

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

Ако имате въпроси, не се колебайте да попитате по-долу или да се свържете с мен в Twitter: @FerryColum.

Първоначално публикуван на https://dev.to на 10 януари 2020 г.