If we take another look at the constructor source code, we can see that we're injecting something new here: a zone instance of NgZone type, that we can use thanks to the reference to the NgZone class we put in the first import code line. What are these zones, and how do they work in Angular?

To get straight to the point, zones are execution contexts for encapsulating and intercepting JavaScript-based asynchronous activities. Each zone acts as a separate, persisting execution context that can be used to trace each asynchronous activity back to its originating source.

For a short yet enlightening definition of what zones are, we can use the words of Brian Ford of the Angular team during the presentation of the Zone.js library at Ng-Conf 2014:

As we already know, most modern JavaScript libraries execute a lot of asynchronous activities, such as DOM events, promises, and XHR calls. Being able to track these activities back to their issue will allow them to take action before and after each activity completes, thus providing great control over the whole execution flow.

This is most likely the reason that led Angular developers to integrate the Zone.js within their framework. As a matter of fact, Angular runs the application and all of its components in a specific zone, so it can listen to its own asynchronous events and react accordingly, checking for data changes, updating the information shown on screen via data binding, and so on.

We won't go further than that, as it will take us far from the scope of this book. The only thing we need to understand here is that whenever we need to call one of our application's methods from outside, we also need to run it within the Angular zone; if we don't do that, Angular won't be able to track the originating source, meaning that it won't react to model changes, won't be able to track the references to the component methods, and so on.

In our specific scenario, since we're using the this.onConnect() method--which also plays with Angular services such as HttpClient and Routing--we definitely need to run our job within the same execution context used by our application.

This is precisely what we did within our OnInit() method (zone-encapsulation lines are highlighted):

[...]

window.fbAsyncInit = () =>
    // be sure to do this within 
    // the local zone, or Angular will be
    // unable to find the local references
    this.zone.run(() => {

        // ... async code within the Angular zone ...

    });

[...]