Nested Components created on the fly in Angular

Question

I have this plunker example https://embed.plnkr.co/RtZvxv2rPFpLPZGndS0g/ where I have two components created on the fly: ContentComponent and HeaderComponent. I want to reference the HeaderComponent selector in the ContentComponent template like this:

ngOnInit() {
  this.template = "<div>This is the {{ name }}</div><app-header></app-header>";
  this.compileTemplate();
}

Unfortunately this is not working and the compiler complains: app-header is not a known element.

Does anyone have an idea how to solve this problem? Is there another way to obtain the same end result?

Answer 1

Angular can't find app-header element because HeaderComponent was neither declared nor imported

To solve it you can create SharedModule that declares and exports HeaderComponent

@NgModule({
    declarations: [ HeaderComponent],
    exports: [HeaderComponent]
})
export class SharedModule { }

and finally simply import it in your dynamic module

@NgModule({
  declarations: [decoratedCmp], 
  imports: [SharedModule] <============ this line
})
class RuntimeContentModule { }

Plunker Example