Saying Goodbye to Zone.js: What’s New in Angular 18?

Angular 18 is set to bring significant changes to change detection by eliminating the need for Zone.js. This shift began with Angular 17 through the introduction of Signals. Now, instead of relying solely on Signal Components, the new hybrid detection system will automatically trigger change detection for any invokers of markForCheck, whether they are inside or outside of Zone.js.

What is Zone JS (Explained with cars) ?

Imagine you have a big garage with 10 cars that you can play with. Each time you play with them, you have a friend who helps you check if any of this cars needs to be fixed or updated. This friend is called Zone.js.

Angular 18, you don’t need your friend Zone.js as much anymore. Before this, in Angular 17, a new way of playing with those “cars” was introduced, called Signals. This was like giving some cars special powers to tell you directly when they needed attention.

Now, in Angular 18, these “cars” don’t have to rely only on their special powers. There’s a new system that will help check if any car needs fixing automatically, whether Zone.js is around or not. So, any car that asks for help (by saying “markForCheck”) will get the attention it needs right away.

So, Now with Angular 18

- Eliminating the need for runOutsideAngular()
- No longer checking every binding on each event.
- No more detach() and detectChanges().

And.. you must know that this is serius by going to the official npm of zone js: https://www.npmjs.com/package/zone.js?activeTab=readme

While Zone.js will continue to receive updates and patches, no new features will be added. The future of Angular applications will focus on developing zoneless apps.