How to reveal what caused Angular ChangeDetection using ZoneJS?

Question

I would like to find out, what is causing Change Detection cycles in my Angular (version 8 - I can't upgrade now) application. I would like to patch or intercept ZoneJS so I can see what has triggered the CD cycle.

(For example: that tick() has been started by HTML input keyup event listener.)

This is my main.ts file:

platformBrowserDynamic().bootstrapModule(AppModule).then(moduleRef => {
  const applicationRef = moduleRef.injector.get(ApplicationRef);
  const componentRef = applicationRef.components[0];
  enableDebugTools(componentRef);
}).catch(err => console.error(err));

And this is monkey patched tick() function to see application ticks.

export class AppModule {
  constructor(
    private readonly translate: TranslateService,
    applicationRef: ApplicationRef
  ) {
    translate.setDefaultLang('cz');

    const originalTick = applicationRef.tick;
    applicationRef.tick = function(): any {
      console.log('TICK');

      return originalTick.apply(this, arguments);
    };
  }
}

With this setup, I can see two ticks for every keyboard input in an input text with [(ngModel)] (and four template checks using {{test()}} / console.log('Template Check') in Component). I would expect only single tick and two template checks.

I found I can use TaskTrackingZoneSpec here but I can't make it work.

Answer 1

Keydown and keypressed events are firing - thus 2 checks as change detection cycle is invoked on user input envets (and xhr requests)