Angular module/component - display on own as well as inside another module/component?

Question

Let's say I have ModuleA with a router entry of:

path: 'modulea',
loadChildren: './modulea/modulea.module#ModuleA'

ComponentA ( ComponentA 's selector is component-a )

ModuleB with a router entry of:

path: 'moduleb',
loadChildren: './moduleb/moduleb.module#ModuleB'

ComponentB ( ComponentB 's selector is component-b )

ComponentA 's template has <div class="component-a">...</div> and if I go to mysite.com/modulea I see everything I expect to see.

However, I cannot get it to display in ComponentB 's template like so:

<div class="component-b">
   Do some stuff

   <div class="component-a"></div>

   Do more stuff
</div>

Which kind of makes sense to me because at that point I feel like I am basically overriding ComponentA 's template (even if it's failing for some other reason).

Nor can I get it to display ComponentA inside ComponentB by switching <div class="component-a"></div> with <component-a></component-a> to it.

The closest I have found to what I am trying to do is, Angular 2 component inside other component . This looks promising, but when I try to add ComponentA as a directive to ComponentB and use <component-a></component-a> , it throws an error that " 'component-a' is not a known element..."

TL;DR:

I want my module/component to display on its own page in my application, as well as be displayed inside another module/component elsewhere in the application.

Answer 1

You should be exporting componentA from your moduleA , so that you can safely use it in componentB , by importing ModuleA in ModuleB .

This will resolve your error

" 'component-a' is not a known element..."

moduleA.module.ts:

@NgModule({
declarations:[ComponentA],
exports:[ComponentA]
})
export class ModuleA{
}

moduleB.module.ts:

@NgModule({
declarations:[ComponentB],
imports:[ModuleA]
})
export class ModuleB{
}

componentB.component.ts

<div class="component-b">
   Do some stuff

   <component-a></component-a>

   Do more stuff
</div>