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

[ahasall]

🐞 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.

[devversion]

Just for later reference. We chatted about this briefly in the GDE channel.

It looks like the hook data structure is the same, given we always have the same hooks, but the start hook data structure is
different and incorrect with the detectChanges [..] For later reference: startIndex is appearing on the hook function, instead of on the directive index when the error is thrown.

It is unexpected that startIndex for the hook invocations is selecting a hook callback, compared to a directive index as usually. Initially suspicion is that the hooks are re-triggered immediately due to the explicit detectChanges while the hook flags are still being updated.

https://cs.opensource.google/angular/angular/+/master:packages/core/src/render3/hooks.ts;l=227-230?q=PREORDER_HOOK_FLAGS&ss=angular

[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.