fix(compiler): ensure that partially compiled queries can handle forward references

When a partially compiled component or directive is "linked" in JIT mode, the body
of its declaration is evaluated by the JavaScript runtime. If a class is referenced
in a query (e.g. `ViewQuery` or `ContentQuery`) but its definition is later in the
file, then the reference must be wrapped in a `forwardRef()` call.

Previously, query predicates were not wrapped correctly in partial declarations
causing the code to crash at runtime. In AOT mode, this code is never evaluated
but instead transformed as part of the build, so this bug did not become apparent
until Angular Material started running JIT mode tests on its distributable output.

This change fixes this problem by noting when queries are wrapped in `forwardRef()`
calls and ensuring that this gets passed through to partial compilation declarations
and then suitably stripped during linking.

See angular/components#23882 and angular/components#23907

Author: petebacondarwin

packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_component_linker_1.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {compileComponentFromMetadata, ConstantPool, DeclarationListEmitMode, DEFAULT_INTERPOLATION_CONFIG, InterpolationConfig, makeBindingParser, parseTemplate, R3ComponentMetadata, R3DeclareComponentMetadata, R3DeclareUsedDirectiveMetadata, R3PartialDeclaration, R3UsedDirectiveMetadata} from '@angular/compiler';
+import {compileComponentFromMetadata, ConstantPool, DeclarationListEmitMode, DEFAULT_INTERPOLATION_CONFIG, ForwardRefHandling, InterpolationConfig, makeBindingParser, parseTemplate, R3ComponentMetadata, R3DeclareComponentMetadata, R3DeclareUsedDirectiveMetadata, R3PartialDeclaration, R3UsedDirectiveMetadata} from '@angular/compiler';
 import {ChangeDetectionStrategy, ViewEncapsulation} from '@angular/compiler/src/core';
 import * as o from '@angular/compiler/src/output/output_ast';
 
@@ -71,8 +71,8 @@ export class PartialComponentLinkerVersion1<TStatement, TExpression> implements
             const type = directiveExpr.getValue('type');
             const selector = directiveExpr.getString('selector');
 
-            const {expression: typeExpr, isForwardRef} = extractForwardRef(type);
-            if (isForwardRef) {
+            const {expression: typeExpr, forwardRef} = extractForwardRef(type);
+            if (forwardRef === ForwardRefHandling.Unwrapped) {
               declarationListEmitMode = DeclarationListEmitMode.Closure;
             }
 
@@ -103,8 +103,8 @@ export class PartialComponentLinkerVersion1<TStatement, TExpression> implements
     let pipes = new Map<string, o.Expression>();
     if (metaObj.has('pipes')) {
       pipes = metaObj.getObject('pipes').toMap(pipe => {
-        const {expression: pipeType, isForwardRef} = extractForwardRef(pipe);
-        if (isForwardRef) {
+        const {expression: pipeType, forwardRef} = extractForwardRef(pipe);
+        if (forwardRef === ForwardRefHandling.Unwrapped) {
           declarationListEmitMode = DeclarationListEmitMode.Closure;
         }
         return pipeType;

packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_directive_linker_1.ts

@@ -14,7 +14,7 @@ import {AstObject, AstValue} from '../../ast/ast_value';
 import {FatalLinkerError} from '../../fatal_linker_error';
 
 import {PartialLinker} from './partial_linker';
-import {wrapReference} from './util';
+import {extractForwardRef, wrapReference} from './util';
 
 /**
  * A `PartialLinker` that is designed to process `ɵɵngDeclareDirective()` call expressions.
@@ -141,7 +141,7 @@ function toQueryMetadata<TExpression>(obj: AstObject<R3DeclareQueryMetadata, TEx
   if (predicateExpr.isArray()) {
     predicate = predicateExpr.getArray().map(entry => entry.getString());
   } else {
-    predicate = predicateExpr.getOpaque();
+    predicate = extractForwardRef(predicateExpr);
   }
   return {
     propertyName: obj.getString('propertyName'),

packages/compiler-cli/linker/src/file_linker/partial_linkers/partial_injectable_linker_1.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {compileInjectable, ConstantPool, createMayBeForwardRefExpression, R3DeclareInjectableMetadata, R3InjectableMetadata, R3PartialDeclaration} from '@angular/compiler';
+import {compileInjectable, ConstantPool, createMayBeForwardRefExpression, ForwardRefHandling, R3DeclareInjectableMetadata, R3InjectableMetadata, R3PartialDeclaration} from '@angular/compiler';
 import * as o from '@angular/compiler/src/output/output_ast';
 
 import {AstObject} from '../../ast/ast_value';
@@ -44,8 +44,9 @@ export function toR3InjectableMeta<TExpression>(
     type: wrapReference(typeExpr.getOpaque()),
     internalType: typeExpr.getOpaque(),
     typeArgumentCount: 0,
-    providedIn: metaObj.has('providedIn') ? extractForwardRef(metaObj.getValue('providedIn')) :
-                                            createMayBeForwardRefExpression(o.literal(null), false),
+    providedIn: metaObj.has('providedIn') ?
+        extractForwardRef(metaObj.getValue('providedIn')) :
+        createMayBeForwardRefExpression(o.literal(null), ForwardRefHandling.None),
   };
 
   if (metaObj.has('useClass')) {

packages/compiler-cli/linker/src/file_linker/partial_linkers/util.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {createMayBeForwardRefExpression, MaybeForwardRefExpression, R3DeclareDependencyMetadata, R3DependencyMetadata, R3Reference} from '@angular/compiler';
+import {createMayBeForwardRefExpression, ForwardRefHandling, MaybeForwardRefExpression, R3DeclareDependencyMetadata, R3DependencyMetadata, R3Reference} from '@angular/compiler';
 import * as o from '@angular/compiler/src/output/output_ast';
 
 import {AstObject, AstValue} from '../../ast/ast_value';
@@ -69,7 +69,7 @@ export function getDependency<TExpression>(
 export function extractForwardRef<TExpression>(expr: AstValue<unknown, TExpression>):
     MaybeForwardRefExpression<o.WrappedNodeExpr<TExpression>> {
   if (!expr.isCallExpression()) {
-    return createMayBeForwardRefExpression(expr.getOpaque(), /* isForwardRef */ false);
+    return createMayBeForwardRefExpression(expr.getOpaque(), ForwardRefHandling.None);
   }
 
   const callee = expr.getCallee();
@@ -91,5 +91,6 @@ export function extractForwardRef<TExpression>(expr: AstValue<unknown, TExpressi
         wrapperFn, 'Unsupported `forwardRef(fn)` call, expected its argument to be a function');
   }
 
-  return createMayBeForwardRefExpression(wrapperFn.getFunctionReturnValue().getOpaque(), true);
+  return createMayBeForwardRefExpression(
+      wrapperFn.getFunctionReturnValue().getOpaque(), ForwardRefHandling.Unwrapped);
 }

packages/compiler-cli/src/ngtsc/annotations/src/directive.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {compileClassMetadata, compileDeclareClassMetadata, compileDeclareDirectiveFromMetadata, compileDirectiveFromMetadata, ConstantPool, Expression, ExternalExpr, FactoryTarget, getSafePropertyAccessString, makeBindingParser, ParsedHostBindings, ParseError, parseHostBindings, R3ClassMetadata, R3DirectiveMetadata, R3FactoryMetadata, R3QueryMetadata, Statement, verifyHostBindings, WrappedNodeExpr} from '@angular/compiler';
+import {compileClassMetadata, compileDeclareClassMetadata, compileDeclareDirectiveFromMetadata, compileDirectiveFromMetadata, ConstantPool, createMayBeForwardRefExpression, Expression, ExternalExpr, FactoryTarget, ForwardRefHandling, getSafePropertyAccessString, makeBindingParser, MaybeForwardRefExpression, ParsedHostBindings, ParseError, parseHostBindings, R3ClassMetadata, R3DirectiveMetadata, R3FactoryMetadata, R3QueryMetadata, Statement, verifyHostBindings, WrappedNodeExpr} from '@angular/compiler';
 import {emitDistinctChangesOnlyDefaultValue} from '@angular/compiler/src/core';
 import * as ts from 'typescript';
 
@@ -532,17 +532,21 @@ export function extractQueryMetadata(
         ErrorCode.DECORATOR_ARITY_WRONG, exprNode, `@${name} must have arguments`);
   }
   const first = name === 'ViewChild' || name === 'ContentChild';
-  const node = tryUnwrapForwardRef(args[0], reflector) ?? args[0];
+  const forwardReferenceTarget = tryUnwrapForwardRef(args[0], reflector);
+  const node = forwardReferenceTarget ?? args[0];
+
   const arg = evaluator.evaluate(node);
 
   /** Whether or not this query should collect only static results (see view/api.ts)  */
   let isStatic: boolean = false;
 
   // Extract the predicate
-  let predicate: Expression|string[]|null = null;
+  let predicate: MaybeForwardRefExpression|string[]|null = null;
   if (arg instanceof Reference || arg instanceof DynamicValue) {
     // References and predicates that could not be evaluated statically are emitted as is.
-    predicate = new WrappedNodeExpr(node);
+    predicate = createMayBeForwardRefExpression(
+        new WrappedNodeExpr(node),
+        forwardReferenceTarget !== null ? ForwardRefHandling.Unwrapped : ForwardRefHandling.None);
   } else if (typeof arg === 'string') {
     predicate = [arg];
   } else if (isStringArrayOrDie(arg, `@${name} predicate`, node)) {

packages/compiler-cli/src/ngtsc/annotations/src/injectable.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {compileClassMetadata, CompileClassMetadataFn, compileDeclareClassMetadata, compileDeclareInjectableFromMetadata, compileInjectable, createMayBeForwardRefExpression, FactoryTarget, LiteralExpr, MaybeForwardRefExpression, R3ClassMetadata, R3CompiledExpression, R3DependencyMetadata, R3InjectableMetadata, WrappedNodeExpr} from '@angular/compiler';
+import {compileClassMetadata, CompileClassMetadataFn, compileDeclareClassMetadata, compileDeclareInjectableFromMetadata, compileInjectable, createMayBeForwardRefExpression, FactoryTarget, ForwardRefHandling, LiteralExpr, MaybeForwardRefExpression, R3ClassMetadata, R3CompiledExpression, R3DependencyMetadata, R3InjectableMetadata, WrappedNodeExpr} from '@angular/compiler';
 import * as ts from 'typescript';
 
 import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
@@ -162,7 +162,7 @@ function extractInjectableMetadata(
       type,
       typeArgumentCount,
       internalType,
-      providedIn: createMayBeForwardRefExpression(new LiteralExpr(null), false),
+      providedIn: createMayBeForwardRefExpression(new LiteralExpr(null), ForwardRefHandling.None),
     };
   } else if (decorator.args.length === 1) {
     const metaNode = decorator.args[0];
@@ -180,7 +180,7 @@ function extractInjectableMetadata(
 
     const providedIn = meta.has('providedIn') ?
         getProviderExpression(meta.get('providedIn')!, reflector) :
-        createMayBeForwardRefExpression(new LiteralExpr(null), false);
+        createMayBeForwardRefExpression(new LiteralExpr(null), ForwardRefHandling.None);
 
     let deps: R3DependencyMetadata[]|undefined = undefined;
     if ((meta.has('useClass') || meta.has('useFactory')) && meta.has('deps')) {
@@ -223,7 +223,8 @@ function getProviderExpression(
     expression: ts.Expression, reflector: ReflectionHost): MaybeForwardRefExpression {
   const forwardRefValue = tryUnwrapForwardRef(expression, reflector);
   return createMayBeForwardRefExpression(
-      new WrappedNodeExpr(forwardRefValue ?? expression), forwardRefValue !== null);
+      new WrappedNodeExpr(forwardRefValue ?? expression),
+      forwardRefValue !== null ? ForwardRefHandling.Unwrapped : ForwardRefHandling.None);
 }
 
 function extractInjectableCtorDeps(