Пользовательский компонент Angular 2 внутри приложения сбоя корневого компонента

У меня есть то, что кажется простой проблемой, которую я пытался обойти при изучении Angular 2. Создание компонента, а затем размещение этого компонента внутри корневого компонента. Когда я не добавляю другой компонент, страница загружается. Когда я импортирую в свой пользовательский компонент и добавляю директиву в корневой компонент, страница остается при загрузке и никуда не уходит, например, ее сбой. Я не могу понять это.

Мой пользовательский компонент (my-c.component.ts):

import {component} from 'angular2/core'; 

@component({
    selector: 'my-comp',
    template: `
        <h3>Second component</h3>
    `
    })

export class mycComponent {

}

А теперь вот мой «корневой» компонент со вставленным моим пользовательским компонентом. (приложение.component.ts)

import {Component} from 'angular2/core';
import {mycComponent} from './my-c.component';


@Component({
    selector: 'my-app',
    template: `
        <h1>Angular 2 Boilerplate (o yea)</h1>
        <h2>Now comes the second component</h2>
        <my-comp></my-comp>
    `,
    directives: [mycComponent]

})

export class AppComponent {

}

И в моем файле index.html без всего заголовка для простоты. Это не включает все включения для полифилов, а также system.config для «запуска» приложения, все они есть.

<my-app>Loading...</my-app>

Когда я удаляю импорт своего пользовательского компонента, а также удаляю директиву, я получаю следующее:

И вот что происходит, когда я добавляю директиву [mycComponent] в корневой компонент.

Вот изображение моего index.html, если вы хотите его увидеть.