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?