NG0200: How to break circular dependency between standalone and non-standalone component

234 views Asked by At

I have two angular components inside a library I'm working on (LibAComponent and LibBComponent). LibAComponent is declared in MyLibModule and LibBComponent is a standalone component. Is it possible that the two components use each other in their templates?

In order for LibAComponent to use LibBComponent I imported LibBComponent into MyLibModule.
Now, if I want to use LibAComponent inside LibBComponent I have to import MyLibModule into LibBComponent which either results in a TypeError: type is undefined or, if i use forwardRef, a NG0200: Circular dependency in DI detected error.

The Code is also availabe on stackblitz.

@Component({
  selector: 'lib-a',
  template: `a
    <ng-container *ngIf="renderChild"> 
      -> <lib-b></lib-b> 
    </ng-container>`,
})
export class LibAComponent {
  @Input()
  renderChild: boolean = false;
}

@Component({
  selector: 'lib-b',
  template: `b 
    <ng-container *ngIf="renderChild">
      ->  <lib-a></lib-a>
    </ng-container>`,
  standalone: true,
  imports: [CommonModule, forwardRef(() => MyLibraryModule)],
})
export class LibBComponent {
  @Input()
  renderChild: boolean = false;
}


@NgModule({
  imports: [CommonModule, LibBComponent],
  declarations: [LibAComponent],
  exports: [LibAComponent, LibBComponent],
})
export class MyLibraryModule {}
0

There are 0 answers