Rendering components issue

[barren comet]

Hello! Since i've upgraded to v17 i have come recently to a problem. I created a web app that renders dynamically on demand components using a component.

 @for(component of this.components; track $index) {
    <p class="text-white z-[999999] font-bold text-5xl">{{ component.identifier }}</p>
    <dynamic-component [component]="component.identifier" [hidden]="component.hidden"></dynamic-component>
  }

the problem is if i render a component in this.components for e.g. "auth" and then "members" and setup a timeout to unrender the "auth" in for e.g. 5s the members component gets unrendered instead of the auth. but in the DOM the dynamic-component remains with the reflect as the "auth". This problem is only on v17, the web app is upgraded from v16.

get components(): IComponent[] {
    console.log('GET COMPONENTS LIST ...')
    console.log(this.web.getComponentsList())
    this.changeDetectorRef.markForCheck();
    return this.web.getComponentsList();
  }

web is a service with methods to help render/unrender components. I tried debugging and everything seems fine

and dynamic-component also has an ngOnDestroy and i get that the component unrendered is members not auth.

ngOnDestroy() {
    console.log('DESTROY !')
    console.log(this.component);
    if (!ComponentLookupRegistry.get(this.component)) {
      return;
    }
    console.log(this.component);

    console.log(ComponentLookupRegistry.get(this.component));
}

I tested it rn on v16 and I can confirm the bug is only on v17.

And... Created a brand new project on v17 just to test it all along again.

Same thing

[gentle glacier]

In v16 you used ngFor. And you probably didn't track by index.

[barren comet]

yes, I used ngfor.

<app-dynamic *ngFor="let component of this.components" [component]="component.identifier" [hidden]="component.hidden"></app-dynamic>

@for (component of this.components; track $index) {
  <app-dynamic [component]="component.identifier" [hidden]="component.hidden"></app-dynamic>
}