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: