Member-only story
10 Things Every Angular Developer Should Know About Zone.js
Every developer should know the basics about Zone.js
1. Why Should I Care About Zone.js?
Angular introduced Zone.js to handle change detection. This allows Angular to decide when the UI has to be refreshed. Usually, you don’t have to care about any of this, because Zone.js just works.
However, if something goes wrong with Zone.js it can be very frustrating to analyze and understand. This is why every developer should know some basics about Zone.js.
2. In a Nutshell: How Does Zone.js Work?
Zone.js patches all common async APIs like setTimeout, setInterval, the promise API, etc. to keep track of all async operations.
Here are the basic concepts you should understand:
Zone
Zone is a mechanism for intercepting and keeping track of asynchronous work.
Tasks
For each async operation, Zone.js creates a task. A task is run in one zone.
NgZone
By default, in an Angular app every task runs in the “Angular” Zone, which is called NgZone. There is only one Angular Zone and change detection is triggered exclusively for async operations which run in the NgZone.
Root Zone/Forks
Zone.js zones are hierarchical which means you always start with a top-level Zone — the “root” Zone. New Zones can be created by forking the root Zone. NgZone is also a fork of the root Zone.
ZoneSpecs
When forking a Zone, a new Zone will be created based on a ZoneSpec. A ZoneSpec can just include a name for the new child Zone, or can include various Hook methods which can be used to intercept certain Zone/task events.
There are more concepts and if you want to learn more about how Zone.js works, you can find more information here:
