🚨 Angular 18 Is Out: Zoneless Upgrade (Step-By-Step)

Summary

La vidéo présente la migration d'une application Angular 17 vers Angular 18 et l'introduction de Zoness, un nouveau système de détection des modifications. Elle démontre comment utiliser Zoness pour la détection des changements, comment résoudre les problèmes de détection avec des intervalles et les observables, et recommande l'utilisation de signaux pour une meilleure intégration. En outre, elle couvre les nouvelles fonctionnalités d'Angular 18, notamment la projection de contenu avec NG Content, l'observable de formulaires pour React Forms, la fonctionnalité de redirection basée sur des paramètres et la compatibilité d'Angular Material avec le rendu côté serveur.

Takeaways

• 🚀 Angular 18 est maintenant disponible avec la première version de Zoness pour le changement de détection.
• 🔄 La migration d'une application Angular 17 vers Angular 18 est expliquée étape par étape, y compris la transition vers Zoness.
• 🔧 Pour vérifier l'utilisation de Zones, il faut rechercher la présence de l'objet global Zone.
• 🛠️ La mise à niveau vers Angular 18 nécessite de modifier la configuration de l'application pour inclure la détection de changement Zoness expérimentale.
• ❗ L'ajout de la détection de changement Zoness est actuellement marquée comme expérimentale et comporte des limitations connues.
• 🔄 Après la mise à niveau, il est nécessaire de redémarrer l'Angular CLI pour que les modifications prennent effet.
• 🔍 La vérification de la migration vers Zoness est possible en essayant d'afficher l'objet global Zone qui devrait être non défini.
• 🔑 Les changements de détection standard et 'onPush' fonctionnent comme prévu avec Zoness après la migration.
• 🔄 La gestion des changements de données déclenchés par des intervalles ou des timeouts nécessite une approche différente avec Zoness.
• 📶 L'utilisation de 'ChangeDetectorRef' pour déclencher manuellement la détection de changement n'est pas recommandée avec Zoness.
• 📶 La solution recommandée pour les mises à jour de données avec Zoness est l'utilisation de 'signals' qui sont plus pratiques et efficaces.
• 🌐 D'autres fonctionnalités d'Angular 18 incluent la projection de contenu NG avec du contenu par défaut et l'ajout d'observables pour les formulaires réactifs.
• 🔄 La possibilité de rediriger vers des routes en utilisant une fonction plutôt qu'une chaîne de caractères a été ajoutée à Angular 18.
• 📦 Une nouvelle version d'Angular Material compatible avec le rendu côté serveur et l'hydratation côté client a été introduite avec Angular 18.

Q & A

Quel est le sujet principal de cette vidéo ?

La vidéo traite de la migration d'une application Angular 17 vers Angular 18 et de l'introduction de Zoness, une nouvelle fonctionnalité de détection des modifications.

Comment vérifier si une application utilise Zones ?

Pour vérifier si une application utilise Zones, il faut rechercher la présence de l'objet global 'Zone' dans le code.

Quels sont les trois scénarios de détection des modifications simples présentés dans la vidéo ?

Les trois scénarios sont un compteur simple, un compteur d'intervalle mis à jour via 'setInterval', et un compteur observable envoyé au modèle via une observable.

Quelle commande permet de migrer une application vers Angular 18 ?

La commande utilisée pour la migration n'est pas spécifiée dans le script, mais il est mentionné que le processus inclut une mise à jour de 'package.json' et l'utilisation de l'outil de construction de l'application.

Pourquoi faut-il redémarrer l'Angular CLI après avoir migré vers Angular 18 ?

Il est nécessaire de redémarrer l'Angular CLI pour que la nouvelle version d'angular.js soit appliquée à l'application.

Quel est le rôle du provider 'experimental-zoness-change-detection' dans la configuration de l'application ?

Le provider 'experimental-zoness-change-detection' active la détection des modifications avec Zoness, qui est en version expérimentale et peut avoir des limitations connues.

Comment Zoness différencie-t-elle la détection des modifications par rapport à Zones ?

Zoness détecte les modifications déclenchées par des gestionnaires d'événements liés dans le modèle Angular et informe Angular que des données ont changé, nécessitant une mise à jour de l'interface utilisateur.

Quel est le problème avec le compteur d'intervalle dans une application Zoness ?

Le compteur d'intervalle ne se met pas à jour dans l'interface utilisateur car Zoness ne sait pas que la valeur a changé, à moins que cela ne soit fait via une observable ou un autre mécanisme de signalisation.

Comment résoudre le problème du compteur d'intervalle dans Zoness ?

On peut utiliser 'ChangeDetectorRef' pour notifier Angular des modifications, mais une approche préférable est d'utiliser des signaux (signals) pour mettre à jour les données et les afficher dans le modèle.

Quelles sont les autres nouveautés d'Angular 18 abordées dans la vidéo ?

Les nouveautés incluent la possibilité de projeter du contenu par défaut avec NG content, un nouvel observable pour les événements de formulaires réactifs, l'utilisation de fonctions dans 'redirectTo' pour la configuration des routes, et une nouvelle version d'Angular Material compatible avec le rendu côté serveur.