Vinkelformet: Sådan understøttes IE11

I denne artikel vil jeg vise dig de trin, jeg tog for at støtte Internet Explorer 11 med Angular. Den første halvdel af dette viser hurtigt de trin, du har brug for at tage, og den anden halvdel vil nedbryde disse trin mere detaljeret for enhver, der ønsker at lære mere. I slutningen tilføjer jeg nogle yderligere tip, der kan komme op i en applikation i den virkelige verden.

Lad os få det gjort

Trin 1 - Målretning af ES5

IE11 understøtter kun i bedste fald ES5. Derfor er vi nødt til at opdatere vores tsconfig.json. Opdater måleenheden i compilerOptions, så den passer til følgende, hvis ikke allerede:

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

Trin 2 - Opdater broswerlist

Åbn din browserlistefil, og ændre linjen ikke IE 9-11, så den passer til:

ikke IE 9-10 IE 11

Trin 3 - Polyfiller

Hvis du eller nogen af ​​dine afhængigheder bruger funktioner fra ES6 +, skal du polyfylde dem. CoreJS er inkluderet i Angular installation og kan bruges til det meste af de polyfylder, du har brug for.

Åbn din polyfills.ts-fil, og placer følgende øverst under BROWSER POLYFILLS:

Hvis du har brug for en hurtig gevinst (IKKE ANBEFALET):

import 'core-js';

Ellers kan du prøve at se, hvilke polyfylder du har brug for. Jeg fandt, at disse dækkede min brugssag:

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 / nummer'; 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 'core-js / es6 / weak-map'; import 'core-js / es6 / set'; import 'core-js / es6 / array'; import 'core-js / es7 / array'; // for. inkluderer ()

Den næste del, vi skal gøre, er at finde følgende linjer nær toppen af ​​polyfills.ts:

/ ** IE10 og IE11 kræver følgende til NgClass-support på SVG-elementer * / // import 'classlist.js'; // Kør `npm installation - gem klasseliste.js`.

Som instrueret kørsel: npm installation - gem klasseliste.js

og fjerner derefter importen fra:

/ ** IE10 og IE11 kræver følgende til NgClass-support på SVG-elementer * / import 'classlist.js'; // Kør `npm installation - gem klasseliste.js`.

Hvis du bruger Angular Material eller AnimationBuilder fra @ angular / platform-browser / animationer, skal du finde følgende linje:

// import 'web-animationer-js'; // Kør `npm installation - gem web-animationer-js`.

Fravælg importmeddelelsen og kør npm installation - gem web-animationer-js.

Din endelige polyfills.ts-fil skal ligne:

Afsluttet

Og det er det! Du skal være god til at gå!

Du kan godt løbe ind i yderligere problemer. Nogle af disse vil nu blive diskuteret i anden halvdel af denne artikel.

Men hvorfor?

Lad os gå hurtigt igennem årsagerne til hvert trin ovenfor, før vi går nærmere ind på yderligere tip til yderligere problemer, der kan opstå.

  • Mål ES5: Temmelig ligetil, IE11 understøtter kun ES5 eller lavere. Derfor skal TypeScript transportere din kode til ES5-kompatibel kode.
  • Browserliste: Dette er interessant. Vi er nødt til at sige, at vi støtter IE 11, men hvis vi ikke understøtter IE 9 eller 10, er det lige så vigtigt at specifikt sige, at vi ikke støtter dem, ellers vil differentielæsseren indeholde en masse guff. _ (Tak @wescopeland_ for dette råd) _
  • Polyfills - Nogle af bibliotekerne, vi arbejder med, eller kode, vi skriver, er afhængige af funktioner fra versioner af ECMAScript, som IE11 ikke understøtter, derfor er vi nødt til at levere denne funktionalitet til ES5 manuelt ved hjælp af løsninger. Dette tillader koden, der bruger moderne funktioner, at fortsætte med at fungere korrekt. (Bemærk: Hver polyfyld øger bundtstørrelsen, så vær forsigtig, når du vælger, hvilke polyfylder der skal importeres)

Nogle yderligere tip

Okay, så motivationen til at skrive denne artikel kom fra at have til opgave at understøtte IE11 i vores green-field app. Det var især smertefuldt, da det var en eftertanke, der derefter fremhævede kompatibilitetsproblemer med understøttelse af IE11:

Tredjeparts afhængigheder skal understøtte ES5

Dette blev hurtigt tydeligt, da fejlene let blev spyttet ud i konsollen. Men det fremhævede et interessant problem.

Hvis vi nu vil medtage en ny afhængighed eller bibliotek i vores applikation, er vi nødt til at sikre, at det bygger på og understøtter ES5, ellers er vi nødt til at springe det over. Dette kan potentielt begrænse vores valg fremad, hvilket aldrig er ideelt.

IE11 understøtter ikke CSS Custom Properties

Dette blev helvede hurtigt. IE11 understøtter ikke CSS-brugerdefinerede egenskaber såsom - primær-farve: blå; hvilket betød, at vores temaløsning potentielt var på rebene.

Efter en masse undersøgelse fandt jeg, at det kunne polyfyldes, men de polyfyldninger, som jeg fandt, var langsomme, havde en enorm indflydelse på bundtstørrelsen og ikke helt perfekte. manglende funktioner såsom flere tilpassede egenskaber på en linje blandt andre problemer.

De fungerede heller ikke for vores særlige brugssag og vores temaløsning, som var afhængig af runtime-indstilling af de brugerdefinerede egenskaber.

Min løsning på dette kom fra css-vars-ponyfill, der gjorde det muligt at indstille globale brugerdefinerede egenskaber ved kørsel. Fantastisk

Indstilling af stilattributten i IE11

IE11 tillader kun indstillingen af ​​et DOM-elements stilattribut med CSS-egenskaber, det understøtter. For eksempel at gøre følgende:

document.body.style = '- primær-farve: blå; skriftstørrelse: 18px ';

resulterer i følgende på IE11, mister - primærfarve: blå.

Stylingproblemer, der opstår som følge af flexbox-support

IE11 understøtter flexbox, men det er meget betyder, hvordan det gør det. Jeg bemærkede, at hvis jeg ville bruge flex: 1; for at tillade et element at udfylde det resterende areal, måtte jeg på IE11 indstille den fulde flex-egenskab: flex: 1 0 auto; eller noget lignende.

Kørsel DevTools i IE11 er i konflikt med zone.js

Yep. Af en eller anden grund forårsager konflikter med zone.js, når du åbner dev-værktøjer, mens ng-server kører på IE11;

For at løse dette skal du tilføje en global ZONE FLAG for zone for at udføre lidt ekstra kode.

Det gør du i polyfills.ts. Find importen af ​​zone.js, og tilføj følgende, så det ser sådan ud:

(vindue som enhver) .__ Zone_enable_cross_context_check = true; import 'zone.js / dist / zone'; // Inkluderet med kantet CLI.

Konklusion

Jeg havde ikke det sjovt med at prøve at få dette til at fungere i løbet af ugen. Nu hvor jeg har støttet det; Jeg føler mig ret færdig . Jeg håber, at denne artikel kan spare nogen smerter i fremtiden!

Forhåbentlig har du opnået noget ved at læse denne artikel, måske et snavs, som du ikke kendte før.

Hvis du har spørgsmål, er du velkommen til at stille nedenunder eller kontakte mig på Twitter: @FerryColum.

Oprindeligt offentliggjort på https://dev.to den 10. januar 2020.