fix(compiler): allow to use pipes inside of *ngIf (#10452)

Fixes #9746

Author: tbosch

modules/@angular/compiler-cli/integrationtest/src/features.ts

@@ -38,6 +38,10 @@ export class CompWithProviders {
 export class CompWithReferences {
 }
 
+@Component({selector: 'cmp-pipes', template: `<div *ngIf>{{test | somePipe}}</div>`})
+export class CompUsingPipes {
+}
+
 @Component({
   selector: 'cmp-custom-els',
   template: `

modules/@angular/compiler-cli/integrationtest/src/module.ts

@@ -13,7 +13,7 @@ import {BrowserModule} from '@angular/platform-browser';
 import {AnimateCmp} from './animate';
 import {BasicComp} from './basic';
 import {CompWithAnalyzeEntryComponentsProvider, CompWithEntryComponents} from './entry_components';
-import {CompWithProviders, CompWithReferences, ModuleUsingCustomElements} from './features';
+import {CompUsingPipes, CompWithProviders, CompWithReferences, ModuleUsingCustomElements} from './features';
 import {CompUsingRootModuleDirectiveAndPipe, SomeDirectiveInRootModule, SomePipeInRootModule, SomeService, someLibModuleWithProviders} from './module_fixtures';
 import {ProjectingComp} from './projection';
 import {CompWithChildQuery, CompWithDirectiveChild} from './queries';
@@ -23,7 +23,7 @@ import {CompWithChildQuery, CompWithDirectiveChild} from './queries';
     SomeDirectiveInRootModule, SomePipeInRootModule, AnimateCmp, BasicComp, CompWithEntryComponents,
     CompWithAnalyzeEntryComponentsProvider, ProjectingComp, CompWithChildQuery,
     CompWithDirectiveChild, CompUsingRootModuleDirectiveAndPipe, CompWithProviders,
-    CompWithReferences
+    CompWithReferences, CompUsingPipes
   ],
   imports: [BrowserModule, FormsModule, someLibModuleWithProviders(), ModuleUsingCustomElements],
   providers: [SomeService],

modules/@angular/compiler/src/view_compiler/compile_pipe.ts

@@ -15,10 +15,6 @@ import * as o from '../output/output_ast';
 import {CompileView} from './compile_view';
 import {createPureProxy, getPropertyInView, injectFromViewParentInjector} from './util';
 
-class _PurePipeProxy {
-  constructor(public view: CompileView, public instance: o.ReadPropExpr, public argCount: number) {}
-}
-
 export class CompilePipe {
   static call(view: CompileView, name: string, args: o.Expression[]): o.Expression {
     var compView = view.componentView;
@@ -41,15 +37,10 @@ export class CompilePipe {
   }
 
   instance: o.ReadPropExpr;
-  private _purePipeProxies: _PurePipeProxy[] = [];
+  private _purePipeProxyCount = 0;
 
   constructor(public view: CompileView, public meta: CompilePipeMetadata) {
     this.instance = o.THIS_EXPR.prop(`_pipe_${meta.name}_${view.pipeCount++}`);
-  }
-
-  get pure(): boolean { return this.meta.pure; }
-
-  create(): void {
     var deps = this.meta.type.diDeps.map((diDep) => {
       if (diDep.token.equalsTo(identifierToken(Identifiers.ChangeDetectorRef))) {
         return getPropertyInView(o.THIS_EXPR.prop('ref'), this.view, this.view.componentView);
@@ -61,28 +52,22 @@ export class CompilePipe {
     this.view.createMethod.addStmt(o.THIS_EXPR.prop(this.instance.name)
                                        .set(o.importExpr(this.meta.type).instantiate(deps))
                                        .toStmt());
-    this._purePipeProxies.forEach((purePipeProxy) => {
-      var pipeInstanceSeenFromPureProxy =
-          getPropertyInView(this.instance, purePipeProxy.view, this.view);
-      createPureProxy(
-          pipeInstanceSeenFromPureProxy.prop('transform')
-              .callMethod(o.BuiltinMethod.bind, [pipeInstanceSeenFromPureProxy]),
-          purePipeProxy.argCount, purePipeProxy.instance, purePipeProxy.view);
-    });
   }
 
+  get pure(): boolean { return this.meta.pure; }
+
   private _call(callingView: CompileView, args: o.Expression[]): o.Expression {
     if (this.meta.pure) {
       // PurePipeProxies live on the view that called them.
-      var purePipeProxy = new _PurePipeProxy(
-          callingView, o.THIS_EXPR.prop(`${this.instance.name}_${this._purePipeProxies.length}`),
-          args.length);
-      this._purePipeProxies.push(purePipeProxy);
+      var purePipeProxyInstance =
+          o.THIS_EXPR.prop(`${this.instance.name}_${this._purePipeProxyCount++}`);
+      var pipeInstanceSeenFromPureProxy = getPropertyInView(this.instance, callingView, this.view);
+      createPureProxy(
+          pipeInstanceSeenFromPureProxy.prop('transform')
+              .callMethod(o.BuiltinMethod.bind, [pipeInstanceSeenFromPureProxy]),
+          args.length, purePipeProxyInstance, callingView);
       return o.importExpr(Identifiers.castByValue)
-          .callFn([
-            purePipeProxy.instance,
-            getPropertyInView(this.instance.prop('transform'), callingView, this.view)
-          ])
+          .callFn([purePipeProxyInstance, pipeInstanceSeenFromPureProxy.prop('transform')])
           .callFn(args);
     } else {
       return getPropertyInView(this.instance, callingView, this.view).callMethod('transform', args);

modules/@angular/compiler/src/view_compiler/compile_view.ts

@@ -191,7 +191,6 @@ export class CompileView implements NameResolver {
   }
 
   afterNodes() {
-    this.pipes.forEach((pipe) => pipe.create());
     this.viewQueries.values().forEach(
         (queries) => queries.forEach(
             (query) => query.afterChildren(this.createMethod, this.updateViewQueriesMethod)));