Почему ng-content удаляет остальную часть моего контента?

Question

Запускаю свое первое приложение на Angular 2, и я пытаюсь заставить работать , однако оно делает странные вещи...

Мой main.ts:

import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component';

bootstrap(AppComponent, [])
    .then(success => console.log('Bootstrap success'))
    .catch(error => console.log(error));

app.component.ts:

import { Component } from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: '/app/app.component.html'
})

export class AppComponent {
}

и app.component.html:

<div class="container-fluid contentArea">
    Test before
    <ng-content></ng-content>
    Test after
</div>

В моем index.html у меня есть это:

<my-app>
    Test
</my-app>

Что происходит, я вижу

Test Before Test After 

в течение примерно 2 секунд до угловой загрузки, затем он очищает страницу, и я вижу только

Test

Что я делаю здесь не так и как мне сохранить тест перед тестом после на моей странице?

Answer 1

Трансклюзия на корневой компонент не поддерживается. Это работает только в шаблонах компонентов, но не из index.html к компоненту.