Comment faire fonctionner Angular 8 avec IE11 sacré IE ….

By: Evan Boissonnot 3 octobre 2019

Vous être en train de tester votre application Angular 8, et vous êtes heureux : sous Chrome, impecc, sous Firefox, génial.
Vous décidez de tester sous IE (pas bien). Et … mince …rien ne fonctionne, mais alors rien du tout !
Comment ça, sous IE11, Angular 8 ne fonctionne pas, mais pourquoi donc ! #WTF.
Regardons ensemble comment s’en sortir pour éviter de mettre en colère notre client-e.

es2015 et les fonctionnalités de Chargement différentiel

Vous le savez sans doute, la plupart des navigateurs modernes savent retrouver les scripts de type module (script type=”module).
Or, certains s’emmêlent les pinceaux.

C’est pour ça que les bundles générés par ng build différencient les scripts pour es2015 (avec le module) et ceux sans. Normalement, si le script n’est pas supporté par un navigateur, il est ignoré.

Ok, ça c’est avec ng build … c’est totalement différent avec le ng serve !
Il s’avère que le ng serve ne génère pas les scripts pour es5, et ne garde que les es2015 … ce que n’aime pas du tout IE11 (WTF une nouvelle fois !)

Deux configurations, une dédiée à IE11

Pour s’en sortir proprement, nous devons dédier une configuration pour IE11 and co.

Et là encore Angular a une véritable force : sa gestion de la configuration !

Première étape : amélioration du angular.json

Allons dans le fichier angular.json, et ajoutons une configuration es5 :

Nous précisons ici que pour cette configuration, nous aurons un fichier de paramétrage différent pour typescript.

Seconde étape : création et configuration du fichier de paramétrage

Et c’est là que ça devient intéressant : nous précisons que nous ne compilons plus en es2015, mais en es5, ce qui permet de ne pas gérer les scripts type module.

En es2015 (es6), beaucoup de nouvelles fonctionnalités sont arrivées. En indiquant à TypeScript que nous voulant passer en es5, nous allons avoir un fichier javascript bien différent, qui est supporté par beaucoup plus de versions de navigateurs.

Et c’est ce que nous souhaitons !