🚨 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.

Outlines

00:00

🚀 Migration vers Angular 18 et Zoness

Dans ce paragraphe, l'auteur présente la sortie d'Angular 18 et la migration de son application Angular 17 vers cette nouvelle version. Il explique comment activer Zoness, une nouvelle fonctionnalité de détection des changements, et compare le comportement entre une application utilisant Zones et une nouvelle application Angular 18 utilisant Zoness. L'auteur démontre comment vérifier l'utilisation de Zones, effectuer la mise à niveau vers Angular 18 et apporter les modifications nécessaires pour passer à Zoness. Il insiste sur l'importance de redémarrer le CLI Angular pour que les modifications prennent effet et conclut en montrant que l'application est désormais sans Zones, ce qui est confirmé par l'absence de l'objet global Zone.

05:01

🔍 Comportement de Zoness avec les différentes sources de changement

Ce paragraphe explore en détail le fonctionnement de Zoness avec les différentes sources de détection des changements, notamment les événements, les observables et les intervalles. L'auteur montre que les événements liés aux boutons et les observables fonctionnent correctement avec Zoness, car elles déclenchent automatiquement la détection des changements. Cependant, les intervalles ne sont pas détectés par Zoness, car ils n'informent pas Angular des changements. Pour résoudre ce problème, l'auteur suggère d'utiliser ChangeDetectorRef ou, de préférence, des signaux (signals) pour notifier Angular des changements. Il recommande d'éviter l'utilisation de ChangeDetectorRef à grande échelle et de privilégier les signaux pour une meilleure intégration avec Zoness.

10:03

🌟 Nouveaux fonctionnalités d'Angular 18

Dans ce paragraphe, l'auteur présente les nouvelles fonctionnalités d'Angular 18, en commençant par la nouvelle option de projection de contenu avec NG content, qui permet de définir un contenu par défaut pour les slots de projection de contenu. Ensuite, il aborde la nouvelle observable de formulaires pour les formulaires réactifs, qui permet de s'abonner à tous les événements survenant dans le formulaire. L'auteur montre également comment utiliser une fonction dans 'redirect' pour les routes, permettant de rediriger en fonction de paramètres spécifiques. Enfin, il mentionne la nouvelle version d'Angular Material compatible avec le rendu côté serveur et l'hydratation côté client, ainsi que la mise à jour de l'interface utilisateur des composants. L'auteur conclut en invitant les téléspectateurs à consulter ses cours sur le site Angular University pour une formation approfondie sur Angular.

Keywords

💡Angular 18

Angular 18 est la dernière version de la plateforme de développement web Angular, qui apporte de nouvelles fonctionnalités et des améliorations. Dans la vidéo, la migration d'une application Angular 17 vers Angular 18 est abordée, montrant comment cette mise à jour peut être effectuée et les changements apportés par cette nouvelle version.

💡Zones et Zoness

Les Zones sont un concept clé dans Angular pour gérer l'exécution de code asynchrone et la détection des modifications. Zoness est une version améliorée de Zones introduite dans Angular 18, qui offre une détection des modifications plus performante. La vidéo montre comment migrer une application utilisant Zones vers Zoness.

💡Détection des modifications (Change Detection)

La détection des modifications est le processus par lequel Angular identifie les changements dans les données et met à jour l'interface utilisateur en conséquence. La vidéo compare les comportements de détection des modifications entre une application basée sur Zones et une application Angular 18 utilisant Zoness.

💡Mise à jour (Upgrade)

La mise à jour d'une application vers une nouvelle version de son framework est une étape importante pour bénéficier des nouvelles fonctionnalités et des améliorations. Le script détaille le processus de mise à jour d'une application Angular 17 vers Angular 18.

💡Application Builder

L'Application Builder est une nouvelle fonctionnalité d'Angular 18 qui permet de construire des applications de manière plus efficace. Le script mentionne l'option d'utiliser l'Application Builder lors de la mise à jour vers Angular 18.

💡Définition de composants (Components)

Les composants sont les blocs de construction de base des applications Angular, représentant des portions de l'interface utilisateur. La vidéo aborde les modifications nécessaires pour les composants lors de la migration vers Zoness.

💡Observables

Les observables sont utilisés en programmation réactive pour représenter des flux de données qui peuvent changer au fil du temps. Dans le script, l'utilisation d'observables pour mettre à jour l'interface utilisateur est comparée entre les méthodes Zones et Zoness.

💡Change Detector Ref

Change Detector Ref est une référence utilisée pour contrôler manuellement le processus de détection des modifications dans Angular. La vidéo explique comment utiliser Change Detector Ref pour résoudre des problèmes de détection des modifications avec Zoness.

💡Signals

Les signaux sont une nouvelle façon de gérer les données asynchrones dans Angular, offrant une alternative à l'utilisation de Change Detector Ref. La vidéo recommande l'utilisation de signaux pour une meilleure intégration avec Zoness.

💡Migration

La migration est le processus de transfert d'une application d'une version ou d'un système à une autre. Le script fournit des étapes spécifiques pour migrer une application Angular 17 vers Angular 18 et vers l'utilisation de Zoness.

💡Angular Material

Angular Material est une bibliothèque de composants UI pour Angular qui suit les lignes directrices de Material Design. La vidéo mentionne une nouvelle version d'Angular Material compatible avec le rendu côté serveur et l'hydratation côté client, adaptée à Angular 18.

Highlights

Angular 18 est maintenant disponible avec la prise en charge initiale de Zoness.

Montre comment migrer une application Angular 17 vers Angular 18 et activer Zoness.

Comparaison du comportement entre une application basée sur Zones et une nouvelle application Angular 18 avec Zoness.

Présentation des astuces nécessaires pour la migration vers Zoness.

Couverture des nouvelles fonctionnalités disponibles dans Angular 18.

Mise à jour vers Angular 18 en utilisant une commande spécifique.

Modification de la configuration de l'application pour activer la détection de changement Zoness.

Suppression du polyfill Zone JS pour passer à Zoness.

Redémarrage du CLI Angular pour appliquer la nouvelle version d'Angular.js.

Vérification de la transition en Zoness en supprimant l'objet global Zone.

Explication du comportement de détection de changement avec Zoness pour les événements liés aux boutons.

Démonstration de la détection de changement automatique avec les observables et le pipe sync.

Problème de non-mise à jour de la counter d'intervalle sans utilisation du pipe sync.

Solution proposée pour notifier Angular des changements en dehors de Zoness en utilisant ChangeDetectorRef.

Recommandation d'utiliser les signaux pour une meilleure pratique avec Zoness.

Introduction de la nouvelle fonctionnalité de projection de contenu avec NG content.

Possibilité de définir un contenu par défaut pour les slots de NG content.

Présentation de la nouvelle observable de formulaires pour React Forms.

Abonnez-vous aux événements de formulaire pour réagir aux changements internes.

Nouvelle possibilité d'utiliser une fonction dans redirect-to pour les routes configurables.

Mise à jour d'Angular Material compatible avec le rendu côté serveur et l'hydratation côté client.

Lien vers les cours Angular University pour apprendre Angular en détail.

Appel à la réaction des téléspectateurs pour connaître leur avis sur la version Angular 18.

Transcripts

angular 18 is out now and the support

for zoness is available in its initial

form in this video I'm going to show you

how to take an angular 17 application

and migrate it to angular 18 turn on

zoness compare the difference of

behavior between an application based on

zones and a new zoness angular 18

application show you the tricks that you

need to know to migrate to zoness and

I'm also going to cover all all the

other extra features that are made

available in angular

[Music]

18 welcome back to the angular

University Channel I'm Vasco so as

you're going to see migrating to zoness

is way easier than it sounds let's take

here this plain angular 17 application

that is currently using zones and let's

confirm that indeed it uses zones and

after that we're going to migrate it to

Zone L and angular 18 so to make sure

that your application uses zones just

check for the presence of the global

Zone object as you can see this

application is Zone based I'm not using

here on push change detection I have

created here free simple change

detection scenarios a plain counter an

interval counter that is being updated

here via set interval and an observable

counter that is being pushed to the

template via an observable so if we

check here the template we are printing

out the plane counter the plane counter

will increment when we click on this

increment plane counter Button as you

can see here the interval counter is

going to be incremented every second as

you can see here via set interval and

finally the observable counter is being

pushed to the template using the sync

pipe so let's Now quickly migrate this

to zoness and compare what happens in

this free typical change detection

scenarios in order to migrate to zoness

First upgrade to angular 18 using the

following command this is going to take

a moment to process I will return When

the installation is completed all right

so a few updates were made in

package.json and now we are being asked

the question use the application Builder

I'm going to hit space to say that yes I

want to use it and this is going to run

here a couple of migration

and now this application is running on

angular 18 to confirm this let's go

ahead and let's hit NG serve and this is

going to build the application that as

we can see is now running here on

angular 18 and everything is still

working as before as expected because we

are still using zones so just because

you migrate to angular 18 does not mean

that you are using zoness let's not now

modify our application and turn it into

a zoness application for that we need to

do a couple of modifications so first

let's go here to our application

configuration and here in your providers

you're going to add the following

provider provide experimental zoness

change detection now the zoness change

detection is marked as experimental I'm

going to talk about a bit the currently

known limitations but I think that for a

lot of applic ations this initial

version of zoness will be more than

enough the next step is to head over to

angular do Json and here we are going to

search for the Zone JS polyfill and

we're going to go ahead and we're going

to remove it now the last step and this

is very important you need to stop your

angular CLI and you need to run it again

otherwise the new version of angular.js

would not be applied to your application

now let's confirm that this is indeed

zoness I'm going to head over here to

the console and let's try to print out

just like we did before the global Zone

object and this time around we have here

zone is not defined so this application

here is effectively zoness so let's have

a look to see what happened you might

have here the illusion that everything

is still working like before that is not

exactly the case so let's simplify this

and let's go each use case at a time

let's start here with the plane counter

so as you can see when you increment the

plane counter this is still working

correctly as expected so what is

happening here is that zoness detects

that a click Handler is clicked on a

button and that is going to trigger a

change detection run so in that sense

everything works like default change

detection or on push this has always

worked in all change detection modes all

sorts of event handlers that are binded

here in the angular template using the

rounded parenthesis syntax will trigger

change detection as usual also in zoness

now let's have a look at the behavior

here of our observable counter so I'm

going to move this up and we are going

to uncomment this and see the behavior

so as you can see after application

refresh the observable counter is still

working correctly as expected so the

fact that we are using the a sync pipe

to push data to the template that is

going to trigger zoness change detection

or in other words it's going to inform

angular that some data has changed in

this component and this component has

been marked as dirty and angular knows

that it needs to update it all right so

so far so good this pretty much works

like default change detection and even

on push this is standard behavior of

angular now let's go ahead and let's

carefully comment out this interval here

to avoid having our application

continuously triggered change detection

due to this interval and let's inspect

this interval counter separately all

right so what is going on here so as you

can see this interval counter even

though it's currently being updated

every second and incremented this is not

getting reflected here in our template

so because this interval counter is not

being fed to the template using

something like the sync pipe there is no

way for zoness change detection to know

that this counter is being changed the

same thing would happen with set timeout

for example there would also be no way

for zoness change detection to know that

a value has been changed in those

circumstances as well so how could we

fix this well we can head over here to

our zoness application and we need to

somehow here when we increment our

counter we need to notify angular and

inform it that a change has happened in

the data of this component so I'm going

to go ahead and I'm going to inject here

the change detector ref and with it it

we are going to go ahead and we're going

to notify angular so I'm going to access

here change detection ref and we're

going to say here Mark for check and now

this time around if we try this we're

going to see that the counter is being

correctly updated in the user interface

as expected Now using change detector

ref might sound like a clever trick but

I don't recommend this approach I think

that instead it's much better to use

signals because it's really not that

practical to use change detector ref

everywhere in your application imagine

that you have to call this after every

HTTP call well you could put it in an

Interceptor Etc but I'm going to show

you what I think is a better way which

is to instead use signals so let's go

ahead and let's turn this interval

counter into a signal let's provide it

its initial value and here let's

refactor this to update the signal so

it's going to be counter equals counter

+ one so now we have performed here the

update of the counter and now don't

forget head over here to the template

and this is now a signal you have to

invoke it otherwise this won't work as

expected and this time around as

expected without having to resort to

change detector rev you have here the

interval counter working correctly as

expected and this is in general the

recommended solution for working with

zoness change detection which is to

prefer to use signals so for example

when you are doing an HTTP call and you

want the data after the HTTP call to be

reflected in the user interface push the

data into a signal and consume that

signal in your templates and everything

will work perfectly and that was the

main new feature of angular 18 zoness

change detection in an initial version

now let's with Rapid Fire cover the

other features that you have available

going on with NG content and angular

content projection you now have default

fallback content for your NG content

slots so let me show you here an example

I've created here a course card

component that takes in here as a

configurable NG content input a title in

this case an H2 tag with the class title

and we can see the course card printed

out here to the screen now let's have a

look here at the content we can see the

component and we are using here NG

content we are using here a Content

projection slot we are currently

checking here for an element in the

content part with the class title and

then we are projecting it here at this

place in the template now one thing that

we did not have so far was the

possibility of defining here default

content in case that we chose not to

provide here any initial value for the

title projection slot but now this is

working so as you can see we now have

default content available for NG content

you might have noticed here this error

message please disregard this it's just

that webstorm is not fully up to date

yet

and you might be curious why does this

look like Visual Studio code well I know

that I'm going to get that question in

the comments so I'm using the visual

studio code dark modern theme so you get

the best of both worlds you get webstorm

with the beautiful vs code theme now

let's go ahead and let's cover our next

feature of angular 18 which is going to

be the new forms observable for react

forms so let's say that you have here a

reactive form in your application you

now have here this new events observable

that you can subscribe to and this is

going to report all the events that are

happening in the form so let me show you

here I'm going to open here another Tab

and let me go ahead and let me load the

application let's quickly use here the

console and let me go ahead and let me

open open here the form and from here

I'm going to start creating here some

events in the form we can see that

already here some events occurred so

such as for example when the value was

initially set when the form became valid

and now if I select here another value

we have a touch change event we have

here another event for example when we

provide here another value here for this

input we can see here all the events

that are currently being fired

internally in our form we can subscribe

to them and react to them using these

new events observable next up and the

final feature that we're going to cover

or one of the final features the

possibility of using a function here in

redirect two when configuring routes in

angular 18 so before redirect to could

only take a string now if you want to

redirect based on some parameter such as

for example on a router parameter or

even a query parameter in the URL you

can return here a string with the URL

that you want to redirect to in our case

we have here the lessons menu entry that

is going to be redirected to the login

page and finally to complete our

coverage of of angular 18 we have

available here a new version of angular

material that is compatible with server

side rendering with client hydration and

that follows the angular material free

specification so you will notice that

the components are slightly different

than before and if you want to learn

angular in detail check out my courses

at the angular University I'm currently

finishing up my latest course which is

the modern angular with signals course

that you can find here already many

hours of content are here available even

though the course is not fully completed

this covers how to build a modern

angular application from A to Z using

signals and with this I hope that you

enjoyed this coverage of angular 18 let

me know in the comment section below

what you think about this release if if

you are planning to migrate to zoness

thank you so much for watching everyone

and I will see you next time