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