Angular: Zone.js Is Bad

Another reason why we are moving away from Angular is because of Zone.js. Angular uses Zone.js to run change detection and update the UI if necessary.

It’s Invasive

Zone.js monkey patches all asynchronous APIs in the browser. This means all events, promises, observables, setTimeout, setInterval, etc., are all monkey-patched to run through Zone.js.

It’s Slow

From our experience, we find Zone.js to be slow, especially when integrating with third-party libraries. After stepping through their cryptic stack trace, we’ve figured Zone.js monkey patching and intercepting are causing the performance issue. If the library is written in Angular natively, the performance is what you would expect, but otherwise, the performance suffers.

Angular provides NgZone, which allows you to run code “outside the zone” to bypass change detection. However, this was still slow. We tried rewriting a portion of the app in React to improve performance. While this greatly improved performance, it’s still not where we wanted it to be due to Zone.js monkey-patching everything.

While Angular now has the option to turn off Zone.js completely, it will require us to rewrite the entire app. If we rewrite the app anyway, why stick with Angular?

Hard to Debug

If you’ve ever encountered the “Angular Debugging “Expression that has changed after it was checked,” then you have my sympathy. This error happens if the change detection determines that a value has changed too quickly. Most of the time, we use heuristics and whack a mole to identify and fix the issue.

In one instance, we had to switch from Default Change Detection Strategy to OnPush Change Detection strategy.

In another instance, we wrapped the code in a promise so that the offending update could be scheduled in the next tick() instead of the current tick(). You can also use setTimeout to schedule it on the next tick().

The fact that you need intimate knowledge of the change detection even to attempt to fix the issue is frustrating. This also means every team member needed to be an expert Angular developer.

Closing Thoughts

We are not a fan of Zone.js. Even the Angular team is looking to move away from it. We can’t wait for a future that may or may not happen. We need a solution that works now. When we rewrote our Customer Portal App in React, it was performant out of the box without any fine-tuning, and most importantly, the stack trace was not gibberish.