RXjs and zone.js issue

[philjones88]

Hello,

I'm developing an Outlook Add-in which essentially is an instance of a Safari browser, this points to an angular 4.2.5 app.

I'm heavily using NGRX Store and RX but I'm hitting issues when I run it inside Outlook rather than developing on Chrome.

This is all using the Angular CLI and JIT not AoT.

Angular version: 4.2.5
Zone.js version: 0.8.12
RX version: 5.4.1
Node version: 8.1

It seems #671 is close to what I'm seeing. But seemingly randomly. I essentially have:

Component:

this.things$ = this.store.select((state) => state.things).distinctUntilChanged();

View:

<div *ngFor="let thing of (things$ | async)">
    <p>Hello {{ thing.name }}!</p>
</div>

Sometimes it won't show the list at all, other times it'll do it.

If I swap back to arrays:

Component:

this.things = [ ];

this.store
     .select((state) => state.things)
     .distinctUntilChanged()
     .map((things) => this.things = things)
     .subscribe();

View:

<div *ngFor="let thing of things">
    <p>Hello {{ thing.name }}!</p>
</div>

This doesn't work at all!

I have to do this in the component:

this.store
     .select((state) => state.things)
     .distinctUntilChanged()
     .map((things) => {
         this.ngZone.run(() => {
             this.things = things;
        });
     })
     .subscribe();

This works every time I reload the page or add-in.

Which to me hints at the RX is somehow escaping the zone on occasion?

[JiaLiPassion]

@philjones88 , could you post a reproduce repo?

[philjones88]

@JiaLiPassion You'd have to have Outlook For Mac 2016 or Outlook 2016 (Windows) and be able to install an Add-in. I could provide a CLI based repo with the XML file needed to install the add-in. But it's not something I can plunkr etc as it works fine outside Outlook in Chrome/Safari.

[philjones88]

A potential cause is if https://github.com/OfficeDev/office-js is causing a conflict with zone.js.

They make you do some silly bootstrapping. You have to wrap your Angular bootstrapping inside their bootstrapping.

I generally disable this for dev on Chrome outside Outlook which might be a reason why it works outside Outlook.

Office.initialize = () => {
   // Your angular bootstrap code here
};

[JiaLiPassion]

@philjones88 , sure, please provide the CLI side setting files and source, and please tell me how to install it, I resolved some issue for Outlook addin for zone.js before, so I have the basic environment.

[philjones88]

@JiaLiPassion I'll send you a ZIP and instructions, it's just the UI part but don't really want to post a GH public repo :)

[philjones88]

@JiaLiPassion isolating this down, it seems to be a safari issue not updating the view with changes, chrome updates fine.

[JiaLiPassion]

@philjones88 , ok , so maybe safari have some different API just like the issue in #671. I will check it after you send me the repo.

[JiaLiPassion]

@philjones88 , I didn't find why it not work in safari, but I removed the this.ngZone.runOutsideAngular code, safari will also work.

[philjones88]

@JiaLiPassion Hmm. That's to make sure the zone gets stable because of Protractor. Interesting find though.

[philjones88]

@JiaLiPassion google'ing around I found https://stackoverflow.com/questions/42700937/angular2-domevents-rxjs-callbacks-happen-outside-ngzone-on-safari and it talks about adding the polyfill https://github.com/webcomponents/webcomponentsjs ? I'm using the latest CLI and the pollyfills.ts file it generated doesn't mention it.

[JiaLiPassion]

@philjones88 , yeah, I forget about it, you may try that too, sorry for the wrong link, if webcomponentjs involved, you can also check this one, #784.

[philjones88]

@JiaLiPassion Interesting stuff.

I had a look at the static methods on NgZone and found NgZone.isInAngularZone()

e.g. a striped down version of the code I sent you via email

  public ngOnInit(): void {
    this.logger.debug('ngOnInit');

    this.spaces$ = this.store
      .select((state) => state.activity.spaces)
      .do(() => {
        const inZone = NgZone.isInAngularZone();
        this.logger.debug('spaces$ next => assertInAngularZone', inZone);
      });

    const repeater$ = Observable.of({})
      .do(() => {
        this.logger.debug('Poll action dispatched');
        this.store.dispatch(new activity.PollAction());
      })
      .delay(2000)
      .repeat();

    this.ngZone.runOutsideAngular(() => {
      this.activitySubscription = repeater$.subscribe(
        () => { },
        (error) => {
          this.logger.error('refresh error', error);
        },
        () => this.logger.info('finished')
      );
    });
  }

You'll see console output of:

ngOnInit
Poll action dispatched
UriService => get  8
spaces$ next => assertInAngularZone true
Poll action dispatched
UriService => get  6
spaces$ next => assertInAngularZone false
Poll action dispatched
...

And the UI in safari stick with showing 8.

Strangely even though you get the same output in Chrome, Chrome updates the UI!

I'll work on getting a plunkr or similar of this behaviour.

[philjones88]

Here's a plnkr to replicate it:

https://embed.plnkr.co/st18pkTPDJtXBpeABNUt/

It'll always be blank as it seems to be executing the observable outside the zone.

As you said, comment on the this.ngZone.runOutsideAngular(() => { lines and it works.

[philjones88]

Seems like https://github.com/angular/zone.js/issues/304 could be related.