Angular 2 : what make a service to be “Outside” angular zone?

Question

After having same issues as many people on StackOverflow i didn\'t manage to understand what is an \"Outside angular zone\" Service ?

I\'ve checks all existing question

Answer 1

The code you want is NgZone.isInAngularZone(). This will tell you whether or not it's executing there.

Source: hours of banging my head against the wall reading Angular docs before writing this.

Additionally, you can inject NgZone into your service and try using this.ngZone.run(() => yourSubscriberCallback()) which should help, though I'm having very mixed results attempting this.

EDIT: Okay, I managed to get my stuff working, let's see if it helps you.

In my case I was using a third party library that included a listener for changes. I was using an RXJS BehaviorSubject to propagate these changes to various components via a service, but the changes weren't being picked up.

It turns out that this was because the method I used in the listener was executing outside of the AngularZone.

At first I was doing this:

export class Service {

  public BehaviorSubject thingSubject = new BehaviorSubject(new Thing());

  constructor(private ngZone:NgZone) {
    thirdPartyLibrary.listen(ngZone.run(() => myCallback.bind(_this)));
  }

  ...

}

And myCallback was doing:

myCallback(thing) {
  this.thingSubject.next(thing);
}

Turns out this didn't seem to execute within the Angular Zone correctly. I changed my code to this though and it worked:

export class Service {

  public BehaviorSubject thingSubject = new BehaviorSubject(new Thing());

  constructor(private ngZone:NgZone) {
    thirdPartyLibrary.listen(myCallback.bind(_this));
  }

  myCallback(thing) {
    this.ngZone.run(() => this.thingSubject.next(thing));
  }

}

After doing that all my subscribers received the message within the Angular Zone and triggered the expected updates.