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