Angular 2+ how to reference component in a peer MODULE

Question

Angular 2 - 7: (Source below): I have SectionA Module with components a and b. A peer of SectionA is SectionB module with components ba and bb. The parent of BOTH SectionA and SectionB is called all-sections.module.ts. In app.module, I ONLY reference 'all-sections module' and have no trouble showing each of the Section A and Section B components working (shown below).
Component 'a' CAN use 'b' in it's html, but I am unable to reference it's cousin 'bb' from SectionB. Question: how to show 'bb' from 'a'.

SectionA module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AComponent} from './a/a.component';
import { BComponent } from './b/b.component';

@NgModule({
  declarations: [
    AComponent,
    BComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    AComponent,
    BComponent
  ]
})
export class SectionAModule { }

SectionB module (rather obvious)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BaComponent } from './ba/ba.component';
import { BbComponent } from './bb/bb.component';

@NgModule({
  declarations: [
    BaComponent,
    BbComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    BaComponent,
    BbComponent
  ]
})
export class SectionBModule { }

All-Sections Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {SectionAModule} from '../SectionA/SectionA.module';
import {SectionBModule} from '../SectionB/SectionB.module';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    SectionAModule,
    SectionBModule
  ],
  exports: [
    SectionAModule,
    SectionBModule
  ]
})
export class AllSectionsModule { }

app.module only imports AllSectionsModule, then app.component.html looks like this:

<div>
  <app-a></app-a>
  <app-b></app-b>
  <app-ba></app-ba>
  <app-bb></app-bb>
</div>

Running the application works as expected:

But I can't find a way to reference 'bb' from 'a' like for example this for example:

in hopes of getting something like this when I just call 'a'. This is 'a.html':

<p>
  a works!  and
  <app-b></app-b> from within Section A  component a WORKS

BUT:
  <app-bb></app-bb>
  This won't work no matter how I try to reference it.
</p>

Thanks in Advance ! Chuck

Answer 1

Yes, you can refer components from "Section A" to "Section B". While Declaring components in SectionB.module.ts.

Add the Components(to be shared) in your case it is "bbComponent" in exports Array as you have done in declarations arrays

e.g: exports: ['bbComponent'].

Now import SectionB module in SectionA.module.ts.

After that you will be able to use that component. That Won't be a good practice.

Instead make a shared module of components that you wish to use in different modules. That will avoid problem of circular reference problem.

Hope that Helped.