fix(compiler-cli): handle forwardRef in imports of standalone component (#45869)

crisbeto · dylhunn · commit 32c625d0279d · 2022-05-04T12:43:58.000-07:00
Fixes that the compiler wasn't resolving `forwardRef` values when they're used in the `imports` of a standalone component. PR Close #45869
diff --git a/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts b/packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts
@@ -26,7 +26,7 @@ import {TypeCheckContext} from '../../../typecheck/api';
 import {ExtendedTemplateChecker} from '../../../typecheck/extended/api';
 import {getSourceFile} from '../../../util/src/typescript';
 import {Xi18nContext} from '../../../xi18n';
-import {compileDeclareFactory, compileNgFactoryDefField, compileResults, extractClassMetadata, extractSchemas, findAngularDecorator, getDirectiveDiagnostics, getProviderDiagnostics, isExpressionForwardReference, readBaseClass, resolveEnumValue, resolveImportedFile, resolveLiteral, resolveProvidersRequiringFactory, ResourceLoader, toFactoryMetadata, wrapFunctionExpressionsInParens} from '../../common';
+import {compileDeclareFactory, compileNgFactoryDefField, compileResults, extractClassMetadata, extractSchemas, findAngularDecorator, forwardRefResolver, getDirectiveDiagnostics, getProviderDiagnostics, isExpressionForwardReference, readBaseClass, resolveEnumValue, resolveImportedFile, resolveLiteral, resolveProvidersRequiringFactory, ResourceLoader, toFactoryMetadata, wrapFunctionExpressionsInParens} from '../../common';
 import {extractDirectiveMetadata, parseFieldArrayValue} from '../../directive';
 import {NgModuleSymbol} from '../../ng_module';
 
@@ -267,7 +267,7 @@ export class ComponentDecoratorHandler implements
       isPoisoned = true;
     } else if (component.has('imports')) {
       const expr = component.get('imports')!;
-      const imported = this.evaluator.evaluate(expr);
+      const imported = this.evaluator.evaluate(expr, forwardRefResolver);
       const {imports: flattened, diagnostics: importDiagnostics} =
           validateAndFlattenComponentImports(imported, expr);
 
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/GOLDEN_PARTIAL.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/GOLDEN_PARTIAL.js
@@ -341,3 +341,47 @@ export declare class Module {
     static ɵinj: i0.ɵɵInjectorDeclaration<Module>;
 }
 
+/****************************************************************************************************
+ * PARTIAL FILE: forward_ref.js
+ ****************************************************************************************************/
+import { Component, forwardRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export class TestComponent {
+}
+TestComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: TestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TestComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: TestComponent, isStandalone: true, selector: "test", ngImport: i0, template: '<other-standalone></other-standalone>', isInline: true, dependencies: [{ kind: "component", type: i0.forwardRef(function () { return StandaloneComponent; }), selector: "other-standalone" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: TestComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'test',
+                    standalone: true,
+                    imports: [forwardRef(() => StandaloneComponent)],
+                    template: '<other-standalone></other-standalone>',
+                }]
+        }] });
+export class StandaloneComponent {
+}
+StandaloneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: StandaloneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StandaloneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "0.0.0-PLACEHOLDER", type: StandaloneComponent, isStandalone: true, selector: "other-standalone", ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDER", ngImport: i0, type: StandaloneComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'other-standalone',
+                    standalone: true,
+                    template: '',
+                }]
+        }] });
+
+/****************************************************************************************************
+ * PARTIAL FILE: forward_ref.d.ts
+ ****************************************************************************************************/
+import * as i0 from "@angular/core";
+export declare class TestComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TestComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TestComponent, "test", never, {}, {}, never, never, true>;
+}
+export declare class StandaloneComponent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<StandaloneComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StandaloneComponent, "other-standalone", never, {}, {}, never, never, true>;
+}
+
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/TEST_CASES.json b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/TEST_CASES.json
@@ -84,6 +84,20 @@
           ]
         }
       ]
+    },
+    {
+      "description": "should handle a forwardRef in the imports of a standalone component",
+      "inputFiles": [
+        "forward_ref.ts"
+      ],
+      "expectations": [
+        {
+          "failureMessage": "Invalid component definition",
+          "files": [
+            "forward_ref.js"
+          ]
+        }
+      ]
     }
   ]
 }
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/forward_ref.js b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/forward_ref.js
@@ -0,0 +1,19 @@
+TestComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({
+  type: TestComponent,
+  selectors: [
+    ["test"]
+  ],
+  standalone: true,
+  features: [i0.ɵɵStandaloneFeature],
+  decls: 1,
+  vars: 0,
+  template: function TestComponent_Template(rf, ctx) {
+    if (rf & 1) {
+      i0.ɵɵelement(0, "other-standalone");
+    }
+  },
+  dependencies: function () {
+    return [StandaloneComponent];
+  },
+  encapsulation: 2
+});
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/forward_ref.ts b/packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/standalone/forward_ref.ts
@@ -0,0 +1,18 @@
+import {Component, forwardRef} from '@angular/core';
+
+@Component({
+  selector: 'test',
+  standalone: true,
+  imports: [forwardRef(() => StandaloneComponent)],
+  template: '<other-standalone></other-standalone>',
+})
+export class TestComponent {
+}
+
+@Component({
+  selector: 'other-standalone',
+  standalone: true,
+  template: '',
+})
+export class StandaloneComponent {
+}
diff --git a/packages/compiler-cli/test/ngtsc/standalone_spec.ts b/packages/compiler-cli/test/ngtsc/standalone_spec.ts

Original file line number	Diff line number	Diff line change
`@@ -84,6 +84,20 @@`
`84`	`84`	`]`
`85`	`85`	`}`
`86`	`86`	`]`
	`87`	`+ },`
	`88`	`+ {`
	`89`	`+ "description": "should handle a forwardRef in the imports of a standalone component",`
	`90`	`+ "inputFiles": [`
	`91`	`+ "forward_ref.ts"`
	`92`	`+ ],`
	`93`	`+ "expectations": [`
	`94`	`+ {`
	`95`	`+ "failureMessage": "Invalid component definition",`
	`96`	`+ "files": [`
	`97`	`+ "forward_ref.js"`
	`98`	`+ ]`
	`99`	`+ }`
	`100`	`+ ]`
`87`	`101`	`}`
`88`	`102`	`]`
`89`	`103`	`}`