Angular 18 vient de sortir ! Nouveautés et améliorations

Nous sommes le 23 mai 2024 et un tournant dans angular est arrivé !
Oui, vous m’avez bien lu, un tournant !
zoneless avait annoncé comme but, et ça yest, c’est officiel !
Découvrons ensemble les nouveautés d’angular 18 !

Zoneless dans angular 18

Zoneless, c’est un comportement prévu depuis de nombreuses années, qui a mis du temps à ar.
Avant même cette étape, nous pouvions nous passer de zonejs, dans le main.ts, avec le ‘noop’ mais … tout n’était pas prévu pour ça.

A base de ChangeDetectorRef, d’ApplicationRef, ou tout simplement (sans passer par le ‘noop’ du main.ts pour la zone), nous pouvions déjà utiliser la stratégie OnPush.

OK, c’était une première belle idée mais … en angular 16 est arrivé un petit nouveau dans angular/core : signal. Et ça y est, nous avions un avant et un après.

Les signaux ont été créés spécifiquement pour ça : laisser le composant / le service prévenir un template du changement / de la notification !

Ainsi, plus besoin de zone.js pour tout détecter en background, trop souvent, avec des hypothèses de mise à jour qui pouvaient être erronées, ..

Paramétrage

On ajoute le provideExperimentalZonelessChangeDetection()

Et on supprime zone.js, d’angular.jon

Mise à jour du template

Le template va être mise à jour suivant les cas suivant :

• markForCheck (automatiquement mis grâce à l’AsyncPipe par exemple)
• setInput du composant
• .set sur un signal abonné sur la vue
• S’attacher à une view marquée en dirty

Coalescing par défaut

Pour réduire le nombre de cycles de détection de changement, on peut regrouper certains événements, c’est le coalescing.

Attention, ne pas le mettre par défaut dans les anciennes applications, sous peine de voir apparaître des bugs / régressions !

Exemple

avec le coalescing à false, nous avons ceci dans la console (regardez les trigger).

C’est à cause du bubble event.

Avec le coalescing d’angular 18 par défaut à true, nous avons maintenant :

Moins de détection de changement de déclenchées !

defer est stable !

@defer était apparu dans la version angular 17. Et c’était un moyen extra-ordinaire pour diminuer la taille du bundle ! Les composants appelés dans @defer sont en lazy ! donc leur bundle sont sur le serveur, au démarrage de l’application !

Vous pouvez diminuer drastiquement la taille du bundle initial ! Couplé au lazy loading … c’est tellement puissant! ❤

Le support natif avec zoneless de l’async await !

Avant la version 18 d’angular, et le zoneless, zoneless ne pouvait pas tracker le async await, et la cli était obligé de redescendre à l’utilisation des Promise.

Maintenant, si on crée un projet en v18, avec la zone less, async/await est supporté nativement par la cli !

Ne fonctionne que si zone.js est exclu de polyfill du fichier angular.json.

Material 3 est disponible

Rendez-vous sur https://material.angular.io/

La signal API en cours de dev

signal, computed, effect, untracked, tout ça c’est stable.
Mais, en 17.2 et 17.3 sont apparus : input, input.required, output, viewchild, model, qui font dire “au revoir” aux directives @Input, @Ouput, …

Tout n’est pas encore stable, attendons quelques versions mineures !

Et aussi

ng — version pour la CLI

ng version existe toujours, mais ça nous liste tout.
Si on veut juste la version : ng --version nous donne la version en cours.

ajout de ng dev

alias de ng serve. ng dev est sans plus facile à lire.

Migration de vite vers le nouveau moteur de package système

Seule la partie dev-server de Vitejs a été déplacée.

Suppression de ng doc

Peu voire pas du tout utilisé, (et pourtant, couplée avec compodoc, c’était vraiment pratique), ils-elles ont décidé de l’enlever.

Pas de génération du fichier index.hml en SSR

Plus de génération de ce fichier. A la place, un fichier index.csr.html (index.server.html) est émis.

Tout ceci pour éviter des problèmes de reconnaissance du fichier index.hml par les servers / les providers cloud.

On peut redemander de générer le fichier index.hml, avec le paramétrage : index.

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:application",
    "options": {
      "outputPath": "dist/my-app",
      "index": {
        "input": "src/index.html",
        "output": "index.html"
      }
    }
  }
}

Et la suite ?

rxjs optionel

Angular nous annonce que rxjs va devenir de plus en optionel dans le coeur d’angular pour les prochaines versions !
Ca aussi, ça amène du changement !

Une déclaration standalone simplifiée

La déclaration et l’appel seront simplifiées :

• plus besoin de mettre standalone à true, ça sera par défaut
• plus besoin de mettre le composant dans la balise import ! il sera reconnu directement depuis le template !

A très vite chez devtobecurious pour d’autres news (dotnet 9 arrive dans quelques mois … :D)

Et d’ici là, stay curious !