Angular: Go Zoneless
Angular is now entering the new Era: Zoneless Angular. In this article we will analyse how big is Zone, what it did to our apps. Then we will see the Zoneless approach and check the differences together. Personally I am very happy regarding this feature as Zone.js is very robust and now outdated system.
Angular 18 with Zone, analysing bundle -> implementation of a simple counter.
Angular 18 With Zone.js
Angular 18 Without Zone.js
Why Zoneless?
Well, isn't it clear after those pictures? …In my opinion it might look clear, but this isn't the only advantage, there are others:
- Better performance: ZoneJS uses async task as indicators for change. It doesn't directly know when and where exactly the change has happened. You can imagine that it is a system that always runs and is checking everything, everywhere with some exceptions such as OnPush strategy etc.
- Debugging: We all know the
Expression Changed After Checked
we've all been there. Now the stack trace and errors will be more straight forward. - Better feeling from the app: I haven't found the right words, but it just feel better. It feel better that when you change a property with
async/await
or using.signal()
. Then the change appears immediately in the correct spot. - Zone.js was the reason not to develop an App in Angular: Imagine you were building a snippet that was checking user interaction. For example you wanted to calculate how many times is user performing some event such as clicking, touching or interacting with keyboard -> in such scenario your app would go crazy with Angular and you would have to have a lot of components running out of Zone and manually trigger change detection. Otherwise your app even with OnPush strategy could freeze.
The Zoneless setup
Firstly remove zone from your .package.json file. Then do not forget to remove the Zone polyfill from Angular.json.
Last step is to setup the bootstrapApplication without zone. For now you can check https://angular.dev/guide/experimental/zoneless#enabling-zoneless-in-an-application
bootstrapApplication(MyApp, {providers: [
provideExperimentalZonelessChangeDetection(),
]});
How To Refactor?
If you are following a facade architecture, mentioned in here then you can simply start with returning signal of all of your methods instead of being observable https://angular.dev/guide/signals/rxjs-interop
- Convert your observables to Signals
- Make sure you are not using async pipes in html, but you are refering to a signal from component or a facade
- Then you can get rid of the zone and of the zone polyfill
- And then you can continue to change the logic from Observables to Signals where needed
- Do not forget to test all of your changes due to a different behaviour
Conclusion
I think that Angular without Zone.JS will be more attractive for the front-end community. Zone.js negatively influenced Angular and it caused that a lot of developers moved to a different frameworks due to its bundle size and performance issues. On the other hand now Angular is becoming very attractive because it still has its unique opionated structure but at the same time it is acting as modern, performant easy to use framework.