using Angular2 typescript component inside another navigated component

I have two Angular2 components, a "Main" and "Another". From "Main", i'm navigating to "Another" which in its template has references to other components such as following template example:

<div>
    Some other templates and HTML...
    <person>Loading person...</person>
</div>

The issue is that the person component has to be bootstrapped if used in that way, however bootstrapping it will cause the selector match error. This makes sense as the HTML template hasn't rendered yet.

How is it possible to achieve this?

Update

Here is a sample code:

Main

import {Component, provide} from 'angular2/core';
import {RouteConfig, Router, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from 'angular2/router';

import {Another} from './Another';

@RouteConfig([
    { path: '/Another', name: 'Another', component: Another}
])
@Component({
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS],
    selector: 'Main',
    template:
    '<div>
        <button type="button" (click)="navigate()">Navigate</button>
        <router-outlet></router-outlet>
    </div>'
})
export class Main {
    constructor(private _router: Router) { }

    navigate() {
        this._router.navigate(['Another']);
    }
}

Another

import {Component} from 'angular2/core';

@Component({
    selector: 'Another',
    template:
    '<div>
        <h1>i'm another!</h1>

        <!-- how do I use this here? -->
        <person>Loading person...</person>
    </div>'
})
export class Another {

}

Person

import {Component} from 'angular2/core';

@Component({
    selector: 'person',
    template:
    '<div
        <h1>i'm person!</h1>
    </div>'
})
export class Person {

}

Again, if I bootstrap person at root component i'll get 'selector didn't match element' error.

Update 2

Adding directives: [Person] to "Another" component will result in following error: "Expected to not be in Angular Zone, but it is!", but the template for 'person' does render.