fix(core): deduplicate imports of standalone components in JIT compiler (#46439)

JoostK · AndrewKushnir · commit c0866536558f · 2022-06-21T12:41:16.000-07:00
During JIT compilation of standalone components the compiler did not deduplicate declarations in the imports array, unlike the AOT compiler. This may result in runtime errors during directive matching, when the same component is found multiple times resulting in NG0300, for example: > NG0300: Multiple components match node with tagname mat-form-field: MatFormField and MatFormField. This commit fixes the issue by deduplicating imports in the JIT compiler. Relates to #46109 (comment) Closes #46109 PR Close #46439
diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts
@@ -246,16 +246,23 @@ function getStandaloneDefFunctions(type: Type<any>, imports: Type<any>[]): {
       // Standalone components are always able to self-reference, so include the component's own
       // definition in its `directiveDefs`.
       cachedDirectiveDefs = [getComponentDef(type)!];
+      const seen = new Set<Type<unknown>>();
 
       for (const rawDep of imports) {
         ngDevMode && verifyStandaloneImport(rawDep, type);
 
         const dep = resolveForwardRef(rawDep);
+        if (seen.has(dep)) {
+          continue;
+        }
+        seen.add(dep);
+
         if (!!getNgModuleDef(dep)) {
           const scope = transitiveScopesFor(dep);
           for (const dir of scope.exported.directives) {
             const def = getComponentDef(dir) || getDirectiveDef(dir);
-            if (def) {
+            if (def && !seen.has(dir)) {
+              seen.add(dir);
               cachedDirectiveDefs.push(def);
             }
           }
@@ -273,12 +280,24 @@ function getStandaloneDefFunctions(type: Type<any>, imports: Type<any>[]): {
   const pipeDefs = () => {
     if (cachedPipeDefs === null) {
       cachedPipeDefs = [];
+      const seen = new Set<Type<unknown>>();
+
       for (const rawDep of imports) {
         const dep = resolveForwardRef(rawDep);
+        if (seen.has(dep)) {
+          continue;
+        }
+        seen.add(dep);
 
         if (!!getNgModuleDef(dep)) {
           const scope = transitiveScopesFor(dep);
-          cachedPipeDefs.push(...Array.from(scope.exported.pipes).map(pipe => getPipeDef(pipe)!));
+          for (const pipe of scope.exported.pipes) {
+            const def = getPipeDef(pipe);
+            if (def && !seen.has(pipe)) {
+              seen.add(pipe);
+              cachedPipeDefs.push(def);
+            }
+          }
         } else {
           const def = getPipeDef(dep);
           if (def) {
diff --git a/packages/core/test/acceptance/standalone_spec.ts b/packages/core/test/acceptance/standalone_spec.ts
@@ -453,6 +453,42 @@ describe('standalone components, directives and pipes', () => {
     expect(fixture.nativeElement.innerHTML).toBe('<div red="true">blue</div>');
   });
 
+  it('should deduplicate declarations', () => {
+    @Component({selector: 'test-red', standalone: true, template: 'red(<ng-content></ng-content>)'})
+    class RedComponent {
+    }
+
+    @Component({selector: 'test-blue', template: 'blue(<ng-content></ng-content>)'})
+    class BlueComponent {
+    }
+
+    @NgModule({declarations: [BlueComponent], exports: [BlueComponent]})
+    class BlueModule {
+    }
+
+    @NgModule({exports: [BlueModule]})
+    class BlueAModule {
+    }
+
+    @NgModule({exports: [BlueModule]})
+    class BlueBModule {
+    }
+
+    @Component({
+      selector: 'standalone',
+      standalone: true,
+      template: `<test-red><test-blue>orange</test-blue></test-red>`,
+      imports: [RedComponent, RedComponent, BlueAModule, BlueBModule],
+    })
+    class TestComponent {
+    }
+
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+    expect(fixture.nativeElement.innerHTML)
+        .toBe('<test-red>red(<test-blue>blue(orange)</test-blue>)</test-red>');
+  });
+
   it('should error when forwardRef does not resolve to a truthy value', () => {
     @Component({
       selector: 'test',
