Угловые 2: метки Selector не загрузит

Question

Я пытаюсь из угловых 2 и после книги, теперь, когда я создать новый компонент, используя быстрый старт с помощью следующего кода

import {Component} from 'angular2/core'; 
@Component({ 
    selector: 'my-component', 
    template: '<h1>Hello</h1>' 
}) 
export Class MyComponent{ 

} 

файл с именем my-component-component.ts и импортировать мой компонент в app.component.ts, но когда я добавляю свой селектор <my-component></my-component>, страница не загружается. Я попытался удалить его, и он работает нормально. Где я делаю ошибку? Ниже код я добавляю в app.component.ts

import { Component } from '@angular/core'; 
import { MyComponent } from './my-component.component'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular App</h1><my-component></my-component>' 
    directive: [MyComponent] 
}) 
export class AppComponent { } 

Edit: Ошибка в консоли говорит

(index):18 Error: (SystemJS) Class is not defined

и он файл, он имеет в виду индекс для угловых Quickstart (может быть найдено на git)

Answer 1

Вам нужно добавить MyComponent в объявления модулей.

@NgModule({ 
     declarations: [ 
     AppComponent, 
     MyComponent // <-- added here 
     ], 
     imports: [ 
     BrowserModule, 
     FormsModule, 
     HttpModule 
     ], 
     providers: [], 
     bootstrap: [AppComponent] 
    }) 
    export class AppModule { } 

Answer 2

ваш вопрос в вас app.module.ts файл вам не только нужно добавить MyComponent ваших заявлений, вам также необходимо добавить импорт, а также. Ваш app.module должен выглядеть следующим образом ...

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { MyComponent } from './my-component.component'; <----Here 

@NgModule({ 
imports: [ BrowserModule ], 
declarations: [ AppComponent, MyComponent ], <-----and Here 
bootstrap: [ AppComponent ] 
}) 

export class AppModule { } 

также в компоненте приложения удалите следующую строку кода ....

import { Component } from '@angular/core'; 
import { MyComponent } from './my-component.component'; 
@Component({ 
    selector: 'my-app', 
    template: '<h1>My First Angular App</h1><my-component></my-component>' 

    directive: [MyComponent] ***<-----REMOVE THIS LINE!*** 
}) 
export class AppComponent { }