My breakpoint in Angular's change detection is not triggered on checkAndUpdateView()

Question

Following this good article on angular's change detection, I wanted to debug the checkAndUpdateView function. However, it is never triggered.

What am I missing? I tried with the latest Chrome and Firefox.

Answer 1

That article is old, from 2018, and since then Angular has introduced the Ivy compiler, which completely overhauled the internals of Angular. If you are using Angular 9 or later this breakpoint won't be hit. I tested an Angular 7, 8 and 9 app. Versions 7 & 8 hit the breakpoint, and the Angular 9 app didn't.

I would suggest using this component to debug change detection. Add it to your app and it will count change detection cycles.

debug-change-detection.component.ts:

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-debug-change-detection',
  template: '<p class="number">{{check()}} zone checks</p>',
  styles: [`
        :host {
          position: absolute;
          left: 10px;
          bottom: 0;
          display: block;
        }
        .number {
          display: block;
        }
    `]
})

export class DebugChangeDetectionComponent {

  count = 0;

  constructor(private zone: NgZone) { }

  check() {
    this.zone.runOutsideAngular(() => {
      setTimeout(() => this.count = this.count + 1);
    });
    return this.count;
  }
}