A runtime error is thrown when calling `detectChanges` inside the `transform` method of a pipe.

🐞 bug report

Affected Package

The issue is caused by package @angular/core.

Is this a regression?

Description

A runtime error is thrown when calling detectChanges inside the transform method of a pipe.

🔬 Minimal Reproduction

A reproduction of this issue can be found here.

🔥 Exception or Error

core.js:4200 ERROR TypeError: Cannot read property 'call' of undefined
    at callHook (core.js:3045)
    at callHooks (core.js:3008)
    at executeCheckHooks (core.js:2941)
    at selectIndexInternal (core.js:6177)
    at Module.ɵɵadvance (core.js:6156)
    at AppComponent_Template (app.component.html:1)
    at executeTemplate (core.js:7306)
    at refreshView (core.js:7175)
    at refreshComponent (core.js:8329)
    at refreshChildComponents (core.js:6968)

🌍 Your Environment

Angular Version:

Angular CLI: 10.0.7
Node: 12.18.3
OS: darwin x64

Angular: 10.0.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.7
@angular-devkit/build-angular     0.1000.7
@angular-devkit/build-optimizer   0.1000.7
@angular-devkit/build-webpack     0.1000.7
@angular-devkit/core              10.0.7
@angular-devkit/schematics        10.0.7
@angular/cdk                      10.1.3
@angular/cli                      10.0.7
@angular/material                 10.1.3
@ngtools/webpack                  10.0.7
@schematics/angular               10.0.7
@schematics/update                0.1000.7
rxjs                              6.5.5
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?

This issue only happens when Ivy is enabled.

[crisbeto]

I spent some more time on it and I found a couple of solutions, but they ended up breaking other functionality so I think I’ll leave this for somebody that knows the hook logic better. Here’s what I’ve got so far:

1. It doesn’t break due to the pipe in particular, but because ViewContainerRef.detectChanges is called at the wrong time. The issue can be reproduced by calling it inside an input setter of a directive that has ngAfterViewInit and ngOnChanges hooks. Here’s an even simpler test case:

it('should not throw when calling detectChanges from setter', () => {
  @Directive({selector: '[dir]'})
  class Dir implements OnChanges, AfterViewInit {
    constructor(private _changeDetectorRef: ChangeDetectorRef) {}

    @Input('dir')
    set value(_value: any) {
      this._changeDetectorRef.detectChanges(); // Triggers the error.
    }
    ngOnChanges() {}
    ngAfterViewInit() {}
  }

  @Component({template: `<div [dir]="value">{{value}}</div>`})
  class App {
    value = 1;
  }

  TestBed.configureTestingModule({declarations: [App, Dir]});
  const fixture = TestBed.createComponent(App);
  fixture.detectChanges();
});

1. I think, the error happens because we re-enter refreshView in the middle of it running the init hooks. In this particular case, it breaks when it’s trying to run ngAfterViewInit, but the same problem can be observed if we change it to ngAfterContentInit, ngAfterViewChecked or ngAfterContentChecked.
2. We’ve dealt with a re-entrant change detection issue like this in the past by moving some of the LView state into the global store (see https://github.com/angular/angular/commit/e16f75db566e7bb22d8b8c1566f8ed5be6874be0). I suspect that we may have to do the same for LView[FLAGS], but I don’t know what the side-effects of doing so would be.
3. The way I tried to fix it was to update the flags which determine whether a hook is allowed to run before actually running the hook. This worked for the test case above, but it broke a bunch of unrelated tests.

[crisbeto]

I’ve been looking into it. It seems to happen if there is an init hook, an ngOnChanges hook and a binding with a pipe on the same element. Here’s a simplified test.

fit('', () => {
  @Pipe({name: 'testPipe', pure: true})
  class TestPipe implements PipeTransform {
    constructor(private _changeDetectorRef: ChangeDetectorRef) {}

    transform(value: any) {
      this._changeDetectorRef.detectChanges();
      return value;
    }
  }

  @Component({
    template: `<div [dir]="1 | testPipe">{{1 | testPipe}}</div>`,
  })
  class App {
  }

  @Directive({selector: '[dir]'})
  class Dir {
    @Input('dir') value: any;
    ngOnChanges() {}
    ngAfterViewInit() {}
  }

  TestBed.configureTestingModule({declarations: [App, Dir, TestPipe]});
  const fixture = TestBed.createComponent(App);
  fixture.detectChanges();
});

I’ll try to either resolve it or post my findings here.