Angular Circular Module import Angular Circular Module import angular angular

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.