From 2b6da93e191a4250dfc81a7bd54c86e45909ea2d Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 2 Jun 2023 23:13:27 +0200 Subject: [PATCH] fix(core): incorrectly throwing error for self-referencing component (#50559) Components are implied to be self-referencing, but if they explicitly set themselves in the `imports` array, they would throw an error because we weren't filtering them out. Fixes #50525. PR Close #50559 --- packages/core/src/render3/jit/directive.ts | 2 +- .../core/test/acceptance/component_spec.ts | 66 ++++++++++++++++++- 2 files changed, 65 insertions(+), 3 deletions(-) diff --git a/packages/core/src/render3/jit/directive.ts b/packages/core/src/render3/jit/directive.ts index 34f90917c6f..0268cd8635f 100644 --- a/packages/core/src/render3/jit/directive.ts +++ b/packages/core/src/render3/jit/directive.ts @@ -245,7 +245,7 @@ function getStandaloneDefFunctions(type: Type, imports: Type[]): { // 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>(); + const seen = new Set>([type]); for (const rawDep of imports) { ngDevMode && verifyStandaloneImport(rawDep, type); diff --git a/packages/core/test/acceptance/component_spec.ts b/packages/core/test/acceptance/component_spec.ts index e04a94b91fa..40b7ff382af 100644 --- a/packages/core/test/acceptance/component_spec.ts +++ b/packages/core/test/acceptance/component_spec.ts @@ -6,8 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ -import {DOCUMENT} from '@angular/common'; -import {ApplicationRef, Component, ComponentRef, createComponent, createEnvironmentInjector, Directive, ElementRef, EmbeddedViewRef, EnvironmentInjector, inject, Injectable, InjectionToken, Injector, Input, NgModule, OnDestroy, reflectComponentType, Renderer2, Type, ViewChild, ViewContainerRef, ViewEncapsulation, ɵsetDocument} from '@angular/core'; +import {DOCUMENT, NgIf} from '@angular/common'; +import {ApplicationRef, Component, ComponentRef, createComponent, createEnvironmentInjector, Directive, ElementRef, EmbeddedViewRef, EnvironmentInjector, forwardRef, inject, Injectable, InjectionToken, Injector, Input, NgModule, OnDestroy, reflectComponentType, Renderer2, Type, ViewChild, ViewContainerRef, ViewEncapsulation, ɵsetDocument} from '@angular/core'; import {stringifyForError} from '@angular/core/src/render3/util/stringify_utils'; import {TestBed} from '@angular/core/testing'; import {expect} from '@angular/platform-browser/testing/src/matchers'; @@ -400,6 +400,68 @@ describe('component', () => { .toThrowError( /NG0300: Multiple components match node with tagname comp: CompA and CompB/); }); + + it('should not throw if a standalone component imports itself', () => { + @Component({ + selector: 'comp', + template: 'hello', + standalone: true, + imports: [Comp, NgIf] + }) + class Comp { + @Input() recurse = false; + } + + @Component({ + template: '', + standalone: true, + imports: [Comp], + }) + class App { + } + + let textContent = ''; + + expect(() => { + const fixture = TestBed.createComponent(App); + fixture.detectChanges(); + textContent = fixture.nativeElement.textContent.trim(); + }).not.toThrow(); + + // Ensure that the component actually rendered. + expect(textContent).toBe('hellohello'); + }); + + it('should not throw if a standalone component imports itself using a forwardRef', () => { + @Component({ + selector: 'comp', + template: 'hello', + standalone: true, + imports: [forwardRef(() => Comp), NgIf] + }) + class Comp { + @Input() recurse = false; + } + + @Component({ + template: '', + standalone: true, + imports: [Comp], + }) + class App { + } + + let textContent = ''; + + expect(() => { + const fixture = TestBed.createComponent(App); + fixture.detectChanges(); + textContent = fixture.nativeElement.textContent.trim(); + }).not.toThrow(); + + // Ensure that the component actually rendered. + expect(textContent).toBe('hellohello'); + }); }); it('should use a new ngcontent attribute for child elements created w/ Renderer2', () => {