Szög: Hogyan támogatjuk az IE11-et

Ebben a cikkben bemutatom azokat a lépéseket, amelyeket megtettem az Internet Explorer 11 Angular támogatásával. Ennek első fele gyorsan megmutatja a szükséges lépéseket, a második fele pedig részletesebben lebontja ezeket a lépéseket mindenki számára, aki többet szeretne megtudni. Végül hozzáadok néhány további tippet, amelyek előfordulhatnak egy valós alkalmazásban.

Végezzük el

1 1. lépés - Célzás az ES5-re

Az IE11 a legjobb esetben csak az ES5-et támogatja. Ezért frissítenünk kell a tsconfig.json. Frissítse a compilerOptions céltulajdonát, hogy megfeleljen a következőknek, ha még nem:

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

2 2. lépés - Frissítse a broswerlistát

Nyissa meg a böngészőlista fájlt, és változtassa meg az IE 9-11 sort, hogy az megegyezzen:

nem IE 9-10 IE 11

3 3. lépés - Polyfills

Ha Ön vagy bármelyik függősége használja az ES6 + szolgáltatásait, akkor ezeket többször kitöltenie kell. A CoreJS a Szögletes telepítés részét képezi, és az igényelt többszörös kitöltéseknél használható.

Nyissa meg a polyfills.ts fájlt, és tegye a tetejére a BROWSER POLYFILLS mezőbe a következőket:

Ha gyors győzelemre van szüksége (NEM JAVASOLT):

„core-js” importálása;

Ellenkező esetben próbálja meg felismerni, hogy milyen polipropilénre van szüksége. Megállapítottam, hogy ezek fedezik a használati esetet:

import „core-js / es6 / szimbólum”; import „core-js / es6 / object”; import „core-js / es6 / function”; import „core-js / es6 / pars-int”; import „core-js / es6 / pars-float”; import „core-js / es6 / szám”; import „core-js / es6 / math”; import „core-js / es6 / string”; import „core-js / es6 / date”; import „core-js / es6 / regexp”; import „core-js / es6 / map”; importáljon a „core-js / es6 / silp-map” -t; import „core-js / es6 / set”; import „core-js / es6 / tömb”; import „core-js / es7 / array”; // a .includes () számára

A következő lépés, amelyet meg kell tennünk, hogy megtaláljuk a következő sorokat a polyfills.ts teteje közelében:

/ ** Az IE10 és IE11 az SVG elemek NgClass támogatásához az alábbiakat igényli * / // import 'classlist.js'; // Futtassa az "npm install --save classlist.js" parancsot.

Az utasítások szerint futtatás: npm telepítés --save classlist.js

majd az importálás megszakítása:

/ ** Az IE10 és IE11 az SVG elemek NgClass támogatásához az alábbiakat igényli * / 'classlist.js' importálása; // Futtassa az "npm install --save classlist.js" parancsot.

Ha szögletes anyagot vagy az @ animációs / platform-böngészőből / animációkból származó AnimationBuilder szoftvert használ, keresse meg a következő sort:

// 'web-animációk-js' importálása; // Futtassa az "npm install - save web-animations-js" fájlt.

Távolítsa el az importálási nyilatkozatot, és futtassa az npm install programot - mentse el a web-animációk-js fájlokat.

A végleges polyfills.ts fájlnak hasonlónak kell lennie:

Kész

És ez az! Jó lenne menni!

Előfordulhat, hogy további kérdésekkel is felmerül. Ezek közül néhányat a cikk második felében tárgyalunk.

De miért?

Gyorsan vizsgáljuk meg a fenti lépések okát, mielőtt áttekintünk néhány további tippet az esetlegesen felmerülő további problémákkal kapcsolatban.

  • ES5 cél: Meglehetősen egyértelmű, az IE11 csak az ES5 vagy annál alacsonyabbat támogatja. Ezért a TypeScriptnek át kell fordítania a kódját az ES5 kompatibilis kódra.
  • Böngészőlista: Ez érdekes. Azt kell mondanunk, hogy támogatjuk az IE 11-et, de ha nem támogatjuk az IE 9-et vagy 10-et, akkor ugyanolyan fontos kifejezetten mondani, hogy nem támogatjuk őket, különben a differenciál rakodó sok guff-ot fog tartalmazni. _ (Köszönöm @wescopeland_ e tanácsért) _
  • Polyfills - Egyes könyvtárak, amelyekkel dolgozunk, vagy az általunk írt kódok, az ECMAScript verzióinak olyan funkcióira támaszkodnak, amelyeket az IE11 nem támogat, ezért ezt a funkciót manuálisan kell biztosítani az ES5-hez, a megoldások használatával. Ez lehetővé teszi a modern funkciókat használó kód megfelelő működését. (Megjegyzés: Minden egyes polyfill kitölti a köteg méretét, ezért legyen óvatos, amikor az importálni kívánt polyfills kitölti)

Additional Néhány további tipp

Rendben, tehát a cikk elkészítésének motivációja az volt, hogy feladata volt az IE11 támogatása zöldmezős alkalmazásunkban. Különösen fájdalmas volt, mivel egy utógondolat váltotta fel az kompatibilitási problémákat az IE11 támogatásával:

A harmadik féltől való függőségeknek támogatniuk kell az ES5-et

Ez gyorsan nyilvánvalóvá vált, mivel a hibákat könnyen kibontották a konzolba. De rávilágított egy érdekes problémára.

Most, ha új függőséget vagy könyvtárat akarunk beilleszteni az alkalmazásba, meg kell győződnünk arról, hogy az ES5-re épül és támogatja-e, különben ki kell hagynunk. Ez potenciálisan korlátozhatja a jövőbeni választásainkat, ami soha nem ideális.

Az IE11 nem támogatja a CSS egyedi tulajdonságait

Ez gyorsan pokollá vált. Az IE11 nem támogatja a CSS egyedi tulajdonságait, például - elsődleges szín: kék; ami azt jelentette, hogy a gyúrási megoldásunk potenciálisan a kötelekön volt.

Sok vizsgálat után rájöttem, hogy többszörösen kitölthető, azonban az általam tapasztalt többszörös töltések lassúak, óriási hatással voltak a köteg méretére, és nem voltak teljesen tökéletesek. hiányzó funkciók, például több egyedi tulajdonság egy sorban a többi probléma között.

Ugyancsak nem működtek a mi konkrét használati esetünknél, és azok kidolgozási megoldásánál, amely az Egyéni tulajdonságok futásidejű beállítására támaszkodott.

Erre a megoldásom a css-vars-ponyfill volt, amely lehetővé tette a globális egyedi tulajdonságok futtatásidejű beállítását. Félelmetes

A stílusattribútum beállítása az IE11-ben

Az IE11 csak a támogatott CSS tulajdonságokkal engedélyezi a DOM Element stílusú attribútumának beállítását. Például:

document.body.style = '- elsődleges szín: kék; betűméret: 18 képpont ”;

az IE11-en a következő eredményeket eredményezve elveszíti a - elsődleges színét: kék.

A flexbox támogatással kapcsolatos stílusproblémák

Az IE11 támogatja a flexbox alkalmazást, de nagyon válogatott, hogy hogyan történik. Észrevettem, hogy ha flex-t akarok használni: 1; Annak érdekében, hogy egy elem kitöltse a fennmaradó helyet, az IE11-en be kellett állítanom a teljes flex tulajdonságot: flex: 1 0 auto; vagy valami hasonlót.

A DevTools futtatása az IE11-ben ütközik a zone.js verzióval

Igen. Valamely okból kifolyólag, ha megnyitja a dev eszközöket, miközben az IE11-en futtatja a kiszolgálást, konfliktusokat okoz a zónával.js;

Ennek javításához hozzá kell adnia egy globális ZONE FLAG-ot a zónához, hogy kissé kiegészítő kódot hajtson végre.

Ezt a polyfills.ts webhelyen teheti meg. Keresse meg a zone.js importálást, és adja hozzá a következőket, így néz ki így:

(ablak, mint bármilyen) .__ Zone_enable_cross_context_check = true; importálás: zóna.js / dist / zóna; // A szög CLI-vel együtt.

Következtetés

Nem volt jó szórakozást, amikor ezt a hetet próbáltam megszerezni. Most, hogy támogatom; Nagyon teljesnek érzem magam . Remélem, hogy ez a cikk a jövőben fájdalmat okozhat valakinek!

Remélhetőleg valami nyereséget kapott e cikk elolvasásakor, talán egy apró apróságot, amelyet eddig még nem tudott.

Ha bármilyen kérdése van, kérjük, bátran kérdezze meg alább, vagy keressen fel nekem a Twitteren: @FerryColum.

Eredetileg a https://dev.to oldalon közzétették, 2020. január 10-én.