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

Summary

This 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

00:00

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

05:01

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

10:03

🛠️ 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.

Keywords

💡Angular 18

Angular 18 is the latest version of Angular, a popular open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. In the video, Angular 18 is significant as it introduces new features and improvements, such as the initial support for 'Zoneless' change detection, which is a major update from the previous versions.

💡Zoneless

Zoneless, often abbreviated as 'zoness' in the script, refers to a new feature in Angular 18 that allows applications to run without the need for Zone.js, a library used by Angular for change detection and other asynchronous operations. The video demonstrates migrating an Angular 17 application to Angular 18 and turning it into a Zoneless application, showcasing the benefits and necessary steps involved.

💡Change Detection

Change detection is a core mechanism in Angular that checks for changes in data-bound properties and updates the view accordingly. The video discusses how change detection behaves differently with Zones and Zoneless, and how to handle various scenarios like click events, intervals, and observables under Zoneless change detection.

💡Migration

Migration in the context of the video refers to the process of upgrading an existing Angular application from one version to another, specifically from Angular 17 to Angular 18. The script outlines the steps needed to perform this migration, including updating the application's configuration and dealing with potential changes in behavior.

💡Angular CLI

Angular CLI is a command-line interface for Angular that facilitates the creation, development, and maintenance of Angular applications. The script mentions the use of Angular CLI commands to perform the migration to Angular 18 and to confirm that the application is running on the new version.

💡Observable

In Angular, an Observable is a core RxJS (Reactive Extensions for JavaScript) concept that represents a stream of values. The video script uses an 'observable counter' as an example to demonstrate how data changes are pushed to the template and how they behave under Zoneless change detection.

💡Signal

A signal, as discussed in the video, is a recommended approach for handling asynchronous data changes under Zoneless change detection. It is a way to encapsulate a value and notify subscribers about its changes. The script suggests using signals instead of directly manipulating the ChangeDetectorRef for better practice.

💡ChangeDetectorRef

ChangeDetectorRef is a service provided by Angular that allows manual intervention in the change detection process. In the script, it is mentioned as a way to force change detection when using intervals under Zoneless, but the video recommends using signals instead for a more practical and clean solution.

💡Content Projection

Content projection is a technique in Angular that allows components to include and display external content via the `<ng-content>` tag. The video introduces a new feature in Angular 18 that provides default fallback content for NG content slots, enhancing the flexibility of component design.

💡React Forms

React Forms is a library in Angular that provides a model-driven approach to form handling. The script mentions a new feature in Angular 18 that introduces an 'events observable' for react forms, allowing developers to subscribe to and react to all form events.

💡Redirect

Redirect is a routing feature in Angular that allows navigation to a different route. The video script highlights a new capability in Angular 18 where the 'redirectTo' property in route configuration can now use a function to determine the redirect path dynamically, adding flexibility to routing logic.

💡Angular Material

Angular Material is a UI component library for Angular applications, providing a set of reusable, well-designed components. The script mentions a new version of Angular Material that is compatible with server-side rendering and client-side hydration, aligning with the 'Angular Material free' specification for improved performance and user experience.

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