Angular 18: How to Remove Zone.js

Introduction to Zone.js

The release of Angular 18 marks a pivotal shift in the framework’s architecture with the optional removal of Zone.js, offering developers more control over performance optimization and change detection mechanisms. This update reflects Angular’s ongoing commitment to providing more flexibility and enhancing the developer experience and significantly changes how Angular works under the hood. It also brings the possibility to remove Zone.js and stop relying on it.

Zone.js has been an integral part of Angular’s change detection process since its inception. It automatically triggers Angular’s change detection whenever asynchronous tasks like timeouts, promises, or DOM events occur. While this feature simplifies the handling of UI updates, it sometimes leads to performance bottlenecks, especially in applications with complex or frequent asynchronous events.

Why you should remove Zone.js?

With Angular 18, developers now have the option to bypass Zone.js. This change is particularly beneficial for those looking to fine-tune performance or integrate Angular with third-party libraries that manage their own state or utilize custom change detection strategies. By opting out of Zone.js, developers can manually control when change detection occurs, leading to more efficient, streamlined applications.

Removing Zone.js involves using the noop zone, which effectively turns off automatic change detection. Developers must then rely on Angular’s ChangeDetectorRef to manually trigger updates. This approach allows for more targeted change detection, reducing processing time and improving application responsiveness.

Enhanced Flexibility and Interoperability

This update also aligns with Angular’s broader goals of increasing interoperability with other JavaScript libraries and frameworks. By reducing reliance on Zone.js, Angular ensures smoother integration with libraries that might not be compatible with Angular’s automatic change detection.

For developers interested in experimenting with this new feature, Angular provides comprehensive documentation and guidelines to manage change detection manually. This freedom not only allows developers to optimize performance but also encourages a deeper understanding of how change detection works in Angular applications.

Cool, but how to actually remove Zone.js?

Zone.js can be completely removed in 3 simple steps:

First, add provideExperimentalZonelessChangeDetection() to the providers array in your app.config, or main.ts file (or whereever you bootstrap your application) like this:

bootstrapApplication(AppComponent, {
   providers: [
     provideExperimentalZonelessChangeDetection(),
   ],
});

Second, remove zone.js import from the polyfills:

If you are using polyfills.ts, remove the following line:

import 'zone.js';

If your project does not contain polyfills.ts (newer Angular versions), you need to remove the following line in angular.json:

"architect": {
    "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          "outputPath": "dist/smart-coin-os-backoffice",
          "index": "src/index.html",
          "main": "src/main.ts",
          "preserveSymlinks": true,
          "polyfills": [
            "zone.js", // <-- Remove this line
          ],
        }
    }
}

Finally, make sure your Angular application is reacting, meaning you are using RxJs and Signals where possible and not variables of type string, number, boolean, etc. For example:

Instead of name = 'foo', use $name = signal('foo'), or name$ = new BehaviorSubject('foo')

Hence, if your application employs ChangeDetectionStrategy.OnPush, utilizes Observables with an async pipe, or uses Signals for rendering data in templates, migrating to Angular 18 could be straightforward and yield considerable advantages.

Conclusion

Great job! Now you can test out the application and make sure everything works as before. As Angular continues to evolve, the ability to opt-out of Zone.js in Angular 18 is a testament to the framework’s adaptability and commitment to addressing community feedback and performance concerns. This move not only enhances Angular’s flexibility but also empowers developers to build highly efficient and customized applications.