独自のコンポーネントとセレクタを作成するとエラーが発生します

Question

私はangular2アプリケーションに問題があります。

// app.component.ts 
import {Component} from '@angular/core'; 
import {CoursesComponent} from './courses.component' 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello</h1><my-courses></my-courses>`, 
    directives: [CoursesComponent] 
}) 
export class AppComponent { 
    name = 'Angular2'; 
} 

と

// courses.component.ts 
import {Component} from '@angular/core'; 

@Component({ 
    selector: 'my-courses', 
    template: '<h2>Courses</h2>' 
}) 
export class CoursesComponent { 

} 

そして、私のアプリが動作しません：私は、そのコードを持っています。 app.component.tsのテンプレートから <my-courses></my-courses>を削除した後、それは動作し始めましたが、私のコースコンポーネントはなくなりました。 これを追加すると、エラーが発生します：

私はそれに間違っていますか？

Answer 1

コンポーネントの一部は同じですかmodule？ moduleにcomponentをインポート/宣言していないと思います。

はこれを行います。

import { CoursesComponent } from './your-path'; 
// ... other imports  

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     CoursesComponent 
     ... 
    ], 
    // ... 

export class AppModule { ... } 

はまた、あなただけAppModuleで、AppComponentでCoursesComponentをインポートする必要はありません。

Answer 2

ちょうどあなたのngModuleにこれを追加します。

schemas: [ CUSTOM_ELEMENTS_SCHEMA ] 

インポートCUSTOM_ELEMENTS_SCHEMAを@angular/core

から、あなたのコンポーネントセレクタに-を持っているためです。