Angular 9 n’aura vécu que quatre mois au lieu de six. De nouveau pas de panique, pour les développeuses et développeurs que nous sommes, les changements dans la création d’applications Angular sont très mineurs. Et songez que React est déjà en version … 16.13, avant d’être tenté de vous exclamer d’un vibrant “encore !?”, à l’occasion de cette nouvelle version de notre bien aimé Angular ;)

Un nouveau component Angular Material : mat-date-range-picker

Comme son nom l’indique, mat-date-range-picker permet de sélectionner un interval temporel : en clair, la possibilité de choisir une date de début et une date de fin. La période est alors accessible.

Un scrict mode pour Angular

Pour créer une app Angular qui sera en strict mode, il suffit d’ajouter la nouvelle option ‘–strict’ :

ng new --strict

Cela permet de créer une nouvelle application avec des settings optimisés, ceci dans le but de :

• faciliter la maintenance

• repérer des bugs plus en amont

• permettre à la CLI d’opérer des optimisation avancées de votre nouvelle app

Concrètement, le strict mode :

• passe le TypeScript en strict mode

• vérifie également les types côté template de façon également stricte

• réduit la taille des bundles jusqu’à 75%

• configure le linter pour signaler les types ‘any’ et vous encourager ainsi à typer fortement

• configure l’application en tant que ‘side-effect free’ afin de bénéficier d’un tree-shaking plus avancé

Pour rappel le “tree shaking” (littéralement “sécouage d’arbre”) est une étape du build qui supprime le code qui n’est pas utilisé. Ici, au lieu de nous débarrasser des feuilles mortes, on se débarrasse du code superflu.

Angular synchronisé avec l’écosystème Javascript

Comme toujours, les dépendances d’Angular sont également mises à jour afin de rester synchro avec l’écosystème JavaScript :

• TypeScript passe en version 3.9

• TSLib est mis à jour en version 2.0

• TSLint est mis à jour en v6

Nouveau : tsconfig.base.json (en plus de tsconfig.json)

Un nouveau fichier fait son apparition : tsconfig.base.json (en plus de tsconfig.json), ceci afin de mieux supporter la façon dont les IDEs et outils de build résolvent les types les packages.

Exclusion des vieux navigateurs

Les vieux browsers sont désormais exclus des browsers par défault. Pour voir de vous même, taper :

npx browserslist

L’effet concret est de désactiver par défault les builds en ES5, étant donné que les navigateurs modernes (chrome, FireFox, Edge …) supportent tous ES6.

Mais si vous avez besoin de supporter IE, ajoutez-le au fichier “.browserslistrc”.

Taille de nouvelle application réduite

Les bundles ESM5 et FESM5 ne sont plus inclus, ce qui allège une nouvelle application Angular de près de 120 Mo (119Mo pour être exact). Cela a été rendu possible par le fait que même si devez supporter ES5, cela se fait désormais en fin de build.

Divers

Vous verrez s’afficher dans votre console un avertissement quand un build de notre appli Angular utilise une dependency qui a été packagée avec CommonJS (ou AMD), et pourrait donc rendre notre application plus grosse et plus lente.

Mettre à jour Angular-CLI

npm install -g @angular/cli

Pour vérifier votre version :

ng --version

Happy Coding !

#angular #javascript #web-development #developer