changeDetection Not checking for update when i use rxjs interval with ApplicationRef.isStable

🐞 bug report

Affected Package

The issue is caused by package @angular/core

Is this a regression?

Don’t know whether it is worked in previous or not

Description

A clear and concise description of the problem...

If i want to use interval in my application i have to start interval after app isStable. But it makes application not to check for changes

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-if8xoz

In above link app.component.ts - ngOnInit hook my interval is running and console log give the correct value but the ui is not updating. This occurs only when i use ApplicationRef.isStable

🔥 Exception or Error

🌍 Your Environment

Angular Version:

Angular CLI: 7.0.7
Node: 10.10.0
OS: win32 x64
Angular: 7.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.7
@angular-devkit/build-angular     0.10.7
@angular-devkit/build-optimizer   0.10.7
@angular-devkit/build-webpack     0.10.7
@angular-devkit/core              7.0.7
@angular-devkit/schematics        7.0.7
@angular/cli                      7.0.7
@angular/fire                     5.1.1
@angular/pwa                      0.10.7
@ngtools/webpack                  7.0.7
@schematics/angular               7.0.7
@schematics/update                0.10.7
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

Anything else relevant?

[JiaLiPassion]

@gkalpak, thanks for the update, and I believe isStable is outsideOf ngZone to avoid endless loop. So isStable next -> ngZone.run -> isStable next ....

[gkalpak]

I might do something like below (but I am neither a Zone.js nor an RxJS expert 😁):

const isStable$ = this.appRef.isStable.pipe(first(x => x));
const interval$ = interval(1000).pipe(startWith(null));
 
return new Observable(observer =>
  isStable$.subscribe(() =>
    this.zone.run(() => {
      let count = 0;
      return interval$.pipe(map(() => count++)).subscribe(observer);
    })));