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 {}