Zone.js in angular framework

What is Zone.js?

Zone.js is the execution context that helps the developers to intercept and keep track of async operations. It works with the concept of associating each operation with the zone. Each and every zone can create or fork a child zone with a different context. Inside the zone, all Async operations are captured by using different API's so with that developer can decide what they can do with interceptions. 

The zones provide the mechanism for encapsulation and intercepting asynchronous tasks in the browser for eg. setTimeout

The ngZone service gives the facility with the number of observables and methods for determining the state of angular zone's and executing the code in different ways inside and outside the angular zone.

Inside The Zone

The ngZone expose the number of observables that allows us to determine the current state, stability of the angular zone. 

• unstable -  This state gets notified when code enters or execute in the angular zone. 
• onMicrotaskEmpty - It gets notified when there is no more microtask queued for execution.
• unstable - This comes when the last onMicrotaskEmpty has run
• onError - It comes when an error has come.

For subscribing these we simply just inject ngZone in our components or services and then subscribe to public observables.

import { Injectable, NgZone } from '@angular/core';

@Injectable()
export class OurZoneWatchingService() {
  constructor(private ngZone: NgZone) {
    this.ngZone.onStable.subscribe(this.onZoneStable);
    this.ngZone.onUnstable.subscribe(this.onZoneUnstable);  
    this.ngZone.onError.subscribe(this.onZoneError);
  }

  onZoneStable() {
    console.log('We are stable');
  }

  onZoneUnstable() {
    console.log('We are unstable');
  }

  onZoneError(error) {
    console.error('Error', error instanceof Error ? error.message : error.toString());
  }
}

By subscribing to the above we can determine if our code, unexpectedly triggering any change detection as the result of operations that do not affect application state.

Change Detection

All asynchronous code gets executed within the Angular zone and can trigger change detection that we may prefer for executing some code outside of the angular zone.

For running code outside the angular context, ngZone provides a method name runOutsideAAngular. By using this method angular zone will not interact with our code and will not get events when the global zone becomes stable.

Debugging

Exceptions are thrown during the chain of asynchronous events that will only include the current method in their stack trace. With zone.js we can track all asynchronous calls. For enabling long stack traces in the development, we should include the long-stack-trace-zone module in code. 

if (__PRODUCTION__) {
  enableProdMode();
} else {
  require('zone.js/dist/long-stack-trace-zone');
}

Zone.js helps us for keeping track of asynchronous activities in the code. It gives a global zone that can be a fork or extended depending on the requirement.