Angular Circular Module import
Maybe you can use content projection with ng-content
directive to compose nested components, but it depends how you need to compose them, in example
// ComposeModule
@NgModule({ imports: [ CommonModule, AppWordModule, AppTestModule ], declarations: [CompositionComponent], exports: [CompositionComponent] }) export class ComposeModule { }
// composition.component.html
<app-word> <app-child-one header> <app-word body> </app-word> </app-child-one> <app-child-two body> <app-word body> </app-word> </app-child-two> </app-word>
// AppWordModule
@NgModule({ imports: [ CommonModule ], declarations: [ WordComponent ], exports: [ WordComponent ] }) export class AppWordModule { }
// word.component.html
<div class="header"> <h2>app-word:header</h2> <ng-content select="[header]"></ng-content> </div> <div class="body"> <h2>app-word:body</h2> <ng-content select="[body]"></ng-content> </div>
// AppTestModule
const COMPONENTS = [ ChildOneComponent, ChildTwoComponent ] @NgModule({ imports: [ CommonModule ], declarations: [ ...COMPONENTS ], exports: [ ...COMPONENTS ] }) export class AppTestModule { }
// child-one.component.html
<div class="header"> <h2>app-child-one:header</h2> <ng-content select="[header]"></ng-content> </div> <div class="body"> <h2>app-child-one:body</h2> <ng-content select="[body]"></ng-content> </div>
// child-two.component.html
<div class="header"> <h2>app-child-two:header</h2> <ng-content select="[header]"></ng-content> </div> <div class="body"> <h2>app-child-two:body</h2> <ng-content select="[body]"></ng-content> </div>
You need to solve the problem architecturally.
You can either create a module that has both functionalities ... since they seem so closely coupled, it would be my first preference, or else you can break up the modules even more so that the features of one module that are required by the other are in their own module.