-1

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'.

enter image description here

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:

enter image description here

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

enter image description here

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

Yogi Bear
  • 943
  • 2
  • 16
  • 32

2 Answers2

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.

Danish Arora
  • 330
  • 1
  • 6
  • Yes, Danish. You are correct. I agree that isn't a good practice, but it IS a way to make it work. I agree and thus I am accepting your answer though I hoped there was a better way. Thanks, – Yogi Bear May 19 '19 at 21:31
0

If you want use component from another module you need export the component from module which contain the component and import this module to your module: you can find more info here

izmaylovdev
  • 1,828
  • 8
  • 16