Angular 18: Zoneless change detection

(Angular without Zone.js)

Curious about Angular’s decision to ditch Zone.js? Let’s dive into the reasons behind this change, explore the benefits it brings, and discover how to refactor your existing code for a smoother transition.

What is Zoneless ? Why use Zoneless ?

Traditional Change Detection: Angular traditionally relies on the Zone.js library for change detection. Zone.js creates an execution context that intercepts asynchronous operations (like HTTP requests, timers, and user events) and triggers change detection when these operations complete. This approach can lead to unnecessary change detection cycles, especially in applications with frequent asynchronous activities.

In other words — Zones act as interceptors, allowing the system to "hook into" asynchronous operations before and after they happen. This enables Angular to track these events and trigger the necessary UI updates.

Zones are organized in a hierarchical structure. Initially, the browser operates within a special “root” zone that mimics the browser’s native behavior, ensuring compatibility with existing code that isn’t specifically designed for zones. Only one zone can be active at a given time, and you can access the currently active zone using Zone.current

Zone.curent

Zoneless Change Detection: This new approach minimizes the reliance on Zone.js. It allows developers to opt-in to a more fine-grained control over when change detection occurs. This can lead to:

• Reduced Overhead: By avoiding unnecessary change detection cycles, applications can experience improved performance, especially in scenarios with frequent asynchronous operations.
• Better Control: Developers have more control over the change detection process, allowing them to optimize it for their specific application needs.

Also here’s the official angular link that explains this change in detail -

[embed]Angular The web development framework for building modern apps.angular.dev

The main advantages to removing ZoneJS as a dependency are:

• Improved performance: ZoneJS uses DOM events and async tasks as indicators of when application state might have updated and subsequently triggers application synchronization to run change detection on the application’s views. ZoneJS does not have any insight into whether application state actually changed and so this synchronization is triggered more frequently than necessary.
• Improved Core Web Vitals: ZoneJS brings a fair amount of overhead, both in payload size and in startup time cost.
• Improved debugging experience: ZoneJS makes debugging code more difficult. Stack traces are harder to understand with ZoneJS. It’s also difficult to understand when code breaks as a result of being outside the Angular Zone.
• Better ecosystem compatibility: ZoneJS works by patching browser APIs but does not automatically have patches for every new browser API. Some APIs simply cannot be patched effectively, such as async/await, and have to be downleveled to work with ZoneJS. Sometimes libraries in the ecosystem are also incompatible with the way ZoneJS patches the native APIs. Removing ZoneJS as a dependency ensures better long-term compatibility by removing a source of complexity, monkey patching, and ongoing maintenance.

How to Use Zoneless Change Detection ?

Enable Zoneless Mode:Code below demonstrates both standalone bootstrap and NgModule bootstrap, Choose whichever is compatible to your app.

// standalone bootstrap
bootstrapApplication(MyApp, {providers: [
  provideExperimentalZonelessChangeDetection(),
]});
// NgModule bootstrap
platformBrowser().bootstrapModule(AppModule);
@NgModule({
  providers: [provideExperimentalZonelessChangeDetection()]
})
export class AppModule {}

Zoneless applications should remove ZoneJS entirely from the build to reduce bundle size. ZoneJS is typically loaded via the polyfills option in angular.json, both in the build and test targets. Remove zone.js and zone.js/testing from both to remove it from the build. Projects which use an explicit polyfills.ts file should remove import 'zone.js'; and import 'zone.js/testing';from the file.

After removing ZoneJS from the build, there is no longer a need for a zone.js dependency either and the package can be removed entirely:

npm uninstall zone.js

A Shift Away from Zone.js

Angular is moving beyond Zone.js, embracing a more explicit approach to reactivity using Signals and RxJS. This provides enhanced control over how and when data changes trigger UI updates. By eliminating the overhead associated with Zone.js, applications can experience noticeable performance boosts, especially in scenarios with frequent asynchronous operations. Signals and RxJS offer a modern and powerful foundation for building reactive applications, aligning with best practices in modern JavaScript development.

This transition signifies a significant step forward for Angular, empowering developers with greater flexibility and control while optimizing application performance.

Here’s a link to an example explaining Signals in detail by me-

[embed]Theme Switcher in Angular: Using Signals (Change Theme: From Light to Dark and vice-versa) Introductionmedium.com

*Refactor your code a*way from Zone.js

If your Angular application currently relies on Zone.js, you don’t need to completely rewrite it. Here’s a simplified guide to the migration process:

1. Remove Zone.js: Begin by removing Zone.js from your polyfills.ts file.
2. Manual Change Detection: For components that still require manual change detection, utilize the ChangeDetectorRef service to explicitly trigger updates.
3. Embrace Signals: Gradually start incorporating Angular Signals for a more reactive and controlled approach to managing data changes.

This phased approach allows you to gradually transition your application away from Zone.js while minimizing disruption.

Key Changes:

• Clearer and More Concise: The language is more concise and direct.
• Focus on Action: The instructions are presented as actionable steps, making them easier to follow.
• Improved Flow: The text flows more smoothly and logically.

This revised version provides a clear and concise guide for developers looking to migrate their Angular applications away from Zone.js.

In Conclusion

Zone.js has been a valuable tool for Angular developers. However, like any technology, it’s time to embrace advancements. With the introduction of Angular Signals and the removal of Zone.js, we gain several other key advantages as well.

Happy Coding!! Stay tuned for more !!