Angular2 - getting a component to load into a different template( passed as string to dynamicaly create)

Question

I am trying to dynamically create a header, constructing and passing the header template as 'string' to my dynamic component which compiles and loads the header. My requirement is to call another component inside the header component template string and load it.

header.component.ts:

import { Component, OnInit, Input } from '@angular/core';

import { AlertComponent } from './alert.component';

@Component({
    selector: 'header', 
    template: `<html-outlet [html]="value"></html-outlet>`,
})
export class HeaderComponent implements OnInit {

@Input()
header = Object;
@Input()
headerData = Object;
headerObj = new Array<any>();
property = new Array<any>();
dataObj = new Array<any>();
dataProperty = new Array<any>();
value: string;

ngOnInit() {
    this.headerObj = JSON.parse(JSON.stringify(this.header));
    this.dataObj = JSON.parse(JSON.stringify(this.headerData));
    this.value = this.prepareHeaderHtml();
}


prepareHeaderHtml(): string {
    this.dataProperty = this.dataObj;
    let user = this.dataProperty[0]["username"];
    console.log("username : "+ user)
    this.property = this.headerObj;
    let headerTemplate = '<div class="header">';
    for (let headerValues in this.property) {
        let headerValue = this.property[0]["value"];
        headerTemplate += `<ul>
                                <span class="fa fa-home"></span>&nbsp;
                                ${headerValue}
                                <span class="title" style="float: right; margin-right: 10px;">
                                    <alert></alert>
                                    <img class="notify-circle" src="img/notify_3.png">&nbsp; ${user} &nbsp;
                                    <img class="user-circle" src="img/profile.png"></span>
                        </ul>`;
    }
    headerTemplate += '</div>';
    return headerTemplate
}

}

alert.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'alert',
    template: `<span><img class="alert-circle" src="img/alert_3.png">&nbsp;</span>`,     
})
export class AlertComponent {}
}

When I pass the header template string to dynamic component class

<html-outlet [html]="value"></html-outlet>

I get an error in the browser console as:

EXCEPTION: Uncaught (in promise): Error: Template parse errors: 'alert' is not a known element: 1. If 'alert' is an Angular component, then verify that it is part of this module. 2. If 'alert' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("an class="title" style="float: right; margin-right: 10px;"> [ERROR ->]<alert></alert> <img class="notify-circle" src="img/notify_3."): DynamicComponent@4:40

Have defined and imported the AlertComponent in app.modules.ts along with MenuComponent and HtmlOutlet. Also have imported the AlertComponent in the dynamic builder component.

Question:

Can any one guide me how to make this work, getting the <alert></alert> recognized in the header template constructed as a string.

works fine though if passed directly as a template not as string.