🚨 Angular 18 Is Out: Zoneless Upgrade (Step-By-Step)
Summary
TLDRThis video tutorial guides viewers through the process of upgrading an Angular 17 application to Angular 18, focusing on the new experimental zoness change detection. It demonstrates how to enable zoness, compares its behavior to traditional zones, and offers solutions for typical change detection scenarios. The video also highlights additional features in Angular 18, such as default fallback content for NG content slots, a new forms observable for reactive forms, and enhanced routing capabilities with function support in redirectTo. Finally, it introduces a new version of Angular Material compatible with server-side rendering and client hydration.
Takeaways
- 🚀 Angular 18 has been released with initial support for Zones.js.
- 🔄 The video demonstrates how to migrate an Angular 17 application to Angular 18 and enable Zones.js.
- 📈 The presenter compares the behavior of an application using Zones with a new Zones.js Angular 18 application.
- 🛠️ To migrate to Zones.js, one must first upgrade to Angular 18 and then modify the application configuration to use experimental Zones.js change detection.
- 🔍 The global Zone object's presence confirms the use of Zones in an application.
- ✅ After migration to Angular 18, the application still works as expected because it continues to use Zones until explicitly switched to Zones.js.
- 🔄 Zones.js change detection in Angular 18 is marked as experimental and has known limitations, but is sufficient for many applications.
- 👀 The video shows that after switching to Zones.js, the global Zone object is no longer defined, indicating a Zones.js environment.
- 🔧 The video covers how to handle change detection in Zones.js, particularly with event handlers and observables, and the use of ChangeDetectorRef as a workaround.
- 📚 It is recommended to use signals with Zones.js change detection for a more practical approach than using ChangeDetectorRef.
- 🌟 Additional features in Angular 18 include default fallback content for NG content slots, a new forms observable for reactive forms, and enhanced route configuration with function support in redirectTo.
- 💡 The video also mentions a new version of Angular Material compatible with server-side rendering and client hydration.
Q & A
What is the main topic of the video?
-The main topic of the video is about migrating an Angular 17 application to Angular 18 and turning on the new Zones.js support called 'zone.js'.
What is the initial form of zone.js support called in Angular 18?
-The initial form of zone.js support in Angular 18 is called 'zoness'.
How can you confirm if an Angular application uses zones?
-You can confirm if an Angular application uses zones by checking for the presence of the global Zone object.
What command is used to upgrade an Angular application to version 18?
-The command to upgrade an Angular application to version 18 is not explicitly mentioned in the script, but it implies using Angular's CLI commands to perform the upgrade.
What is the recommended approach to handle change detection in a zoness Angular application?
-The recommended approach to handle change detection in a zoness Angular application is to use signals, which automatically inform Angular when data changes.
Why is using ChangeDetectorRef not recommended for zoness change detection?
-Using ChangeDetectorRef is not recommended for zoness change detection because it's not practical to use it everywhere in your application, such as after every HTTP call.
What is the new feature in Angular 18 regarding NG content projection?
-The new feature in Angular 18 regarding NG content projection is the ability to have default fallback content for NG content slots.
What is the new observable feature for reactive forms in Angular 18?
-In Angular 18, there is a new 'events observable' feature for reactive forms that allows developers to subscribe to and react to all the events happening in the form.
How has the 'redirectTo' configuration changed in Angular 18 for routing?
-In Angular 18, 'redirectTo' can now take a function instead of just a string, allowing for dynamic redirection based on parameters or query parameters in the URL.
What is the latest version of Angular Material mentioned in the video, and what does it support?
-The latest version of Angular Material mentioned in the video is compatible with server-side rendering with client hydration and follows the Angular Material free specification.
Outlines
🚀 Angular 18 Migration and Zoness Introduction
The video script introduces Angular 18, highlighting its new feature, Zoness, which is an experimental change detection mechanism. The host, Vasco, guides viewers through the process of upgrading an Angular 17 application to Angular 18 and then enabling Zoness. The script explains how to confirm the use of Zones in an application by checking for the global Zone object and demonstrates simple change detection scenarios, such as a plain counter, an interval counter, and an observable counter. The migration process involves upgrading to Angular 18, modifying the application configuration to use Zoness change detection, and removing the Zone JS polyfill. The video also covers the necessary steps to restart the Angular CLI to apply the new version of angular.js. Finally, it confirms that the application is running as Zoness by checking for the absence of the global Zone object.
🔍 Exploring Zoness Change Detection and Signal Usage
This section of the script delves deeper into how Zoness change detection works in practice. It compares the behavior of different change detection scenarios under Zoness, such as event handlers, observables, and interval counters. The script shows that while event handlers and observables trigger change detection as expected, interval counters do not update the template unless explicitly notified. To address this, the script suggests using the Change Detector Ref to mark the component for check, although it recommends against this approach due to its impracticality. Instead, it advocates for the use of signals, which are a more practical and recommended solution for Zoness change detection. The script demonstrates how to refactor an interval counter into a signal and update it, ensuring that changes are reflected in the user interface without needing to use Change Detector Ref.
🛠️ Additional Features of Angular 18 and Upcoming Courses
The final paragraph of the script covers additional features introduced in Angular 18. It starts with NG content and content projection, where a new feature allows for default fallback content in NG content slots. An example is given with a course card component that projects a title using NG content. The script then moves on to discuss a new observable for reactive forms in Angular, which allows developers to subscribe to and react to all form events. Next, it introduces a new function in 'redirect to' for route configuration, enabling more dynamic redirection based on parameters. The script wraps up with the release of a new version of Angular Material, which is compatible with server-side rendering and client hydration, and follows the Angular Material free specification. The host also promotes his upcoming course on modern Angular with signals, which will cover building Angular applications from scratch using this new approach.
Mindmap
Keywords
💡Angular 18
💡Zoneless
💡Change Detection
💡Migration
💡Angular CLI
💡Observable
💡Signal
💡ChangeDetectorRef
💡Content Projection
💡React Forms
💡Redirect
💡Angular Material
Highlights
Angular 18 has been released with initial support for Zoness.
The video demonstrates migrating an Angular 17 application to Angular 18 and turning on Zoness.
It compares the behavior between a Zones-based application and a new Zoness Angular 18 application.
The tutorial shows tricks needed to migrate to Zoness.
All extra features available in Angular 18 are covered.
Migrating to Zoness is easier than it sounds.
The presence of the global Zone object confirms the use of Zones.
Three simple change detection scenarios are created: a plain counter, an interval counter, and an observable counter.
Upgrading to Angular 18 involves updating package.json and using the application Builder.
After migration, the application still works as before because it's still using Zones.
To turn the application into a Zoness application, modifications are needed in the application configuration.
Zoness change detection is marked as experimental with known limitations.
The global Zone object is no longer defined in a Zoness application.
Zoness detects click handlers and triggers change detection runs.
Observable counters work correctly with Zoness when using the async pipe.
Interval counters do not update in the template unless fed through the async pipe or similar.
Injecting ChangeDetectorRef and using MarkForCheck can fix the issue with interval counters.
Using signals is recommended over ChangeDetectorRef for Zoness change detection.
Angular 18 introduces default fallback content for NG content slots.
A new forms observable for reactive forms in Angular 18 allows subscribing to form events.
Angular 18 allows the use of a function in redirectTo for route configuration.
A new version of Angular Material compatible with server-side rendering and client hydration is available.
Angular University offers courses on modern Angular with signals.
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
関連動画をさらに表示
More updates from Angular v18
Angular 18 is EXACTLY what we needed
#02 Creating a new Angular Project | Getting Started with Angular | A Complete Angular Course
What’s new in Angular v18
How do I test Signals (signal / computed / effect)
#03 Editing the First Angular Project | Getting Started with Angular | A Complete Angular Course
5.0 / 5 (0 votes)