fix(compiler): include used components during JIT compilation of partial component declaration (#41353)

JoostK · alxhub · commit ff9470b0a019 · 2021-04-01T11:39:41.000-07:00
In #41104 the list of used directives was split into two arrays of used directives and components, but the JIT side was not updated. This commit fixes the JIT integration by including the list of used components. Fixes #41318 PR Close #41353
diff --git a/packages/compiler/src/compiler_facade_interface.ts b/packages/compiler/src/compiler_facade_interface.ts
@@ -200,12 +200,8 @@ export interface R3DeclareComponentFacade extends R3DeclareDirectiveFacade {
   template: string;
   isInline?: boolean;
   styles?: string[];
-  directives?: {
-    selector: string; type: OpaqueValue | (() => OpaqueValue);
-    inputs?: string[];
-    outputs?: string[];
-    exportAs?: string[];
-  }[];
+  components?: R3DeclareUsedDirectiveFacade[];
+  directives?: R3DeclareUsedDirectiveFacade[];
   pipes?: {[pipeName: string]: OpaqueValue|(() => OpaqueValue)};
   viewProviders?: OpaqueValue;
   animations?: OpaqueValue;
@@ -215,6 +211,14 @@ export interface R3DeclareComponentFacade extends R3DeclareDirectiveFacade {
   preserveWhitespaces?: boolean;
 }
 
+export interface R3DeclareUsedDirectiveFacade {
+  selector: string;
+  type: OpaqueValue|(() => OpaqueValue);
+  inputs?: string[];
+  outputs?: string[];
+  exportAs?: string[];
+}
+
 export interface R3UsedDirectiveMetadata {
   selector: string;
   inputs: string[];
diff --git a/packages/compiler/src/jit_compiler_facade.ts b/packages/compiler/src/jit_compiler_facade.ts
@@ -7,7 +7,7 @@
  */
 
 
-import {CompilerFacade, CoreEnvironment, ExportedCompilerFacade, OpaqueValue, R3ComponentMetadataFacade, R3DeclareComponentFacade, R3DeclareDependencyMetadataFacade, R3DeclareDirectiveFacade, R3DeclareFactoryFacade, R3DeclareInjectorFacade, R3DeclareNgModuleFacade, R3DeclarePipeFacade, R3DeclareQueryMetadataFacade, R3DependencyMetadataFacade, R3DirectiveMetadataFacade, R3FactoryDefMetadataFacade, R3InjectableMetadataFacade, R3InjectorMetadataFacade, R3NgModuleMetadataFacade, R3PipeMetadataFacade, R3QueryMetadataFacade, StringMap, StringMapWithRename} from './compiler_facade_interface';
+import {CompilerFacade, CoreEnvironment, ExportedCompilerFacade, OpaqueValue, R3ComponentMetadataFacade, R3DeclareComponentFacade, R3DeclareDependencyMetadataFacade, R3DeclareDirectiveFacade, R3DeclareFactoryFacade, R3DeclareInjectorFacade, R3DeclareNgModuleFacade, R3DeclarePipeFacade, R3DeclareQueryMetadataFacade, R3DeclareUsedDirectiveFacade, R3DependencyMetadataFacade, R3DirectiveMetadataFacade, R3FactoryDefMetadataFacade, R3InjectableMetadataFacade, R3InjectorMetadataFacade, R3NgModuleMetadataFacade, R3PipeMetadataFacade, R3QueryMetadataFacade, StringMap, StringMapWithRename} from './compiler_facade_interface';
 import {ConstantPool} from './constant_pool';
 import {ChangeDetectionStrategy, HostBinding, HostListener, Input, Output, Type, ViewEncapsulation} from './core';
 import {compileInjectable} from './injectable_compiler_2';
@@ -384,7 +384,9 @@ function convertDeclareComponentFacadeToMetadata(
     ...convertDeclareDirectiveFacadeToMetadata(declaration, typeSourceSpan),
     template,
     styles: declaration.styles ?? [],
-    directives: (declaration.directives ?? []).map(convertUsedDirectiveDeclarationToMetadata),
+    directives: (declaration.components ?? [])
+                    .concat(declaration.directives ?? [])
+                    .map(convertUsedDirectiveDeclarationToMetadata),
     pipes: convertUsedPipesToMetadata(declaration.pipes),
     viewProviders: declaration.viewProviders !== undefined ?
         new WrappedNodeExpr(declaration.viewProviders) :
@@ -400,8 +402,7 @@ function convertDeclareComponentFacadeToMetadata(
   };
 }
 
-function convertUsedDirectiveDeclarationToMetadata(
-    declaration: NonNullable<R3DeclareComponentFacade['directives']>[number]):
+function convertUsedDirectiveDeclarationToMetadata(declaration: R3DeclareUsedDirectiveFacade):
     R3UsedDirectiveMetadata {
   return {
     selector: declaration.selector,
diff --git a/packages/compiler/test/compiler_facade_interface_spec.ts b/packages/compiler/test/compiler_facade_interface_spec.ts
@@ -116,6 +116,11 @@ const coreR3DeclareComponentFacade: core.R3DeclareComponentFacade =
 const compilerR3DeclareComponentFacade: compiler.R3DeclareComponentFacade =
     null! as core.R3DeclareComponentFacade;
 
+const coreR3DeclareUsedDirectiveFacade: core.R3DeclareUsedDirectiveFacade =
+    null! as compiler.R3DeclareUsedDirectiveFacade;
+const compilerR3DeclareUsedDirectiveFacade: compiler.R3DeclareUsedDirectiveFacade =
+    null! as core.R3DeclareUsedDirectiveFacade;
+
 const coreR3UsedDirectiveMetadata: core.R3UsedDirectiveMetadata =
     null! as compiler.R3UsedDirectiveMetadata;
 const compilerR3UsedDirectiveMetadata: compiler.R3UsedDirectiveMetadata =
diff --git a/packages/core/src/compiler/compiler_facade_interface.ts b/packages/core/src/compiler/compiler_facade_interface.ts
@@ -200,12 +200,8 @@ export interface R3DeclareComponentFacade extends R3DeclareDirectiveFacade {
   template: string;
   isInline?: boolean;
   styles?: string[];
-  directives?: {
-    selector: string; type: OpaqueValue | (() => OpaqueValue);
-    inputs?: string[];
-    outputs?: string[];
-    exportAs?: string[];
-  }[];
+  components?: R3DeclareUsedDirectiveFacade[];
+  directives?: R3DeclareUsedDirectiveFacade[];
   pipes?: {[pipeName: string]: OpaqueValue|(() => OpaqueValue)};
   viewProviders?: OpaqueValue;
   animations?: OpaqueValue;
@@ -215,6 +211,14 @@ export interface R3DeclareComponentFacade extends R3DeclareDirectiveFacade {
   preserveWhitespaces?: boolean;
 }
 
+export interface R3DeclareUsedDirectiveFacade {
+  selector: string;
+  type: OpaqueValue|(() => OpaqueValue);
+  inputs?: string[];
+  outputs?: string[];
+  exportAs?: string[];
+}
+
 export interface R3UsedDirectiveMetadata {
   selector: string;
   inputs: string[];
diff --git a/packages/core/test/render3/jit/declare_component_spec.ts b/packages/core/test/render3/jit/declare_component_spec.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ChangeDetectionStrategy, Directive, ElementRef, forwardRef, Pipe, Type, ViewEncapsulation, ɵɵngDeclareComponent} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Directive, ElementRef, forwardRef, Pipe, Type, ViewEncapsulation, ɵɵngDeclareComponent} from '@angular/core';
 import {AttributeMarker, ComponentDef} from '../../../src/render3';
 import {functionContaining} from './matcher';
 
@@ -338,6 +338,21 @@ describe('component declaration jit compilation', () => {
     });
   });
 
+  it('should compile used components', () => {
+    const def = ɵɵngDeclareComponent({
+                  type: TestClass,
+                  template: '<cmp></cmp>',
+                  components: [{
+                    type: TestCmp,
+                    selector: 'cmp',
+                  }],
+                }) as ComponentDef<TestClass>;
+
+    expectComponentDef(def, {
+      directives: [TestCmp],
+    });
+  });
+
   it('should compile used directives', () => {
     const def = ɵɵngDeclareComponent({
                   type: TestClass,
@@ -353,6 +368,25 @@ describe('component declaration jit compilation', () => {
     });
   });
 
+  it('should compile used directives together with used components', () => {
+    const def = ɵɵngDeclareComponent({
+                  type: TestClass,
+                  template: '<cmp dir></cmp>',
+                  components: [{
+                    type: TestCmp,
+                    selector: 'cmp',
+                  }],
+                  directives: [{
+                    type: TestDir,
+                    selector: '[dir]',
+                  }],
+                }) as ComponentDef<TestClass>;
+
+    expectComponentDef(def, {
+      directives: [TestCmp, TestDir],
+    });
+  });
+
   it('should compile forward declared directives', () => {
     const def = ɵɵngDeclareComponent({
                   type: TestClass,
@@ -534,6 +568,10 @@ class TestClass {}
 class TestDir {
 }
 
+@Component({selector: 'cmp', template: ''})
+class TestCmp {
+}
+
 @Pipe({name: 'test'})
 class TestPipe {
 }
