ivy - Async pipe gets wrong ChangeDetectorRef instance when using pipe inside a component input

[alexzuza]

🐞 bug report

Affected Package

The issue is caused by package @angular/compiler-cli/ngcc

Is this a regression?

Yes, it works in ViewEngine and should also work with Ivy after #31438 but it doesn't work for ngcc processed pipes.

Description

When using Async pipe inside a component input Angular should inject a ChangeDetectorRef of the containing view but it injects the ChangeDetectorRef that refers to component view.

@Component({
  selector: 'my-app',
  template: `
   <child [prop]="obs$ | async"></child>
  `
})
class AppComponent {}

// @angular/common
class AsyncPipe {
 constructor(cdRef: ChangeDetectorRef) {}
}

// expected  cdRef.context -> AppComponent
// actual    cdRef.context -> ChildComponent

Not too long time ago there was a PR #31438 that was intended to fix that problem with pipes. It introduced ɵɵinjectPipeChangeDetectorRef function to inject ChangeDetectorRef so that the factory for pipe that injects ChangeDetectorRef should look like:

AsyncPipe.ɵfac = function AsyncPipe_Factory(t) {
  return new (t || AsyncPipe)(ɵngcc0.ɵɵinjectPipeChangeDetectorRef(};
}

but we get the following:

AsyncPipe.ɵfac = function AsyncPipe_Factory(t) { 
  return new (t || AsyncPipe)(ɵngcc0.ɵɵdirectiveInject(ChangeDetectorRef));
};

It should be noted that ngtsc generates correct factories for user-defined pipes since in this case ngtsc uses TypeScriptReflectionHost to read metadata. The TypeScriptReflectionHost treats ChangeDetectorRef reference as ExternalExpr while Esm2015ReflectionHost treats it as a local reference

angular/packages/compiler-cli/ngcc/src/host/esm2015_host.ts

Line 1318 in b381497

{local: true as true, expression: typeExpression, defaultImportStatement: null} :

🌍 Your Environment

Angular Version:

@angular/core@9.0.0-rc.0
@angular/common@9.0.0-rc.0
@angular/compiler-cli@9.0.0-rc.0

@alxhub @petebacondarwin @JoostK @crisbeto