🚨 Angular 18 Is Out: Zoneless Upgrade (Step-By-Step)
Summary
TLDRLa 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
🚀 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.
🔍 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.
🌟 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.
Mindmap
Keywords
💡Angular 18
💡Zones et Zoness
💡Détection des modifications (Change Detection)
💡Mise à jour (Upgrade)
💡Application Builder
💡Définition de composants (Components)
💡Observables
💡Change Detector Ref
💡Signals
💡Migration
💡Angular Material
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
Voir Plus de Vidéos Connexes
Actuelburo - Démonstration du projecteur interactif Epson EB-685WI - Easy interactive tools.
Langage SQL - Vidéo 5: SELECT / DISTINCT / WHERE
iOS 18 : les futures nouveautés !
Apple in 2024: dit kan je verwachten (HIJ KOMT 🥽)
How To Make Aternos Server 24/7 | FREE & Working
LE COURS : La dérivation - Première
5.0 / 5 (0 votes)