新しいコンポーネントをtypescriptでアングル2アプリケーションに追加できません

Question

私はAngular 2 CLIを使用していて、コンポーネント "MyComponent"をng generate component MyComponentで作成しました。私の知る限りでは、私は@Componentデコレータの指示キーと値のペアにコンポーネントを追加する必要がありますが、typescriptですコンパイルはと言って、この時点で失敗：

ERROR in [default] /Users/Philip/Desktop/Angular2/src/app/app.component.ts:8:2 
Argument of type '{ selector: string; template: any; styles: any[]; directives: typeof MyComponentComponent[]; }' is not assignable to parameter of type 'Component'. 
    Object literal may only specify known properties, and 'directives' does not exist in type 'Component'. 

は、このアプリのために私のコードです：

import { Component } from '@angular/core'; 
import { MyComponentComponent } from './my-component/my-component.component' 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    directives: [MyComponentComponent], 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

私は、生成されたコンポーネントのコードには触れなかったが、念のため：

import { Component, OnInit } from '@angular/core'; 

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

export class MyComponentComponent implements OnInit { 

    constructor() { 

    } 

    ngOnInit() { 
    } 

} 

Answer 1

エラー自体は、ディレクティブがやると言っていますコンポーネントには存在しません。廃止予定です。以下のようにこのコードを試してみてください、

import { MyComponentComponent } from './my-component/my-component.component' 
import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; 

@NgModule({ 
    ... 
    ... 
    declarations:[AppComponent,MyComponentComponent], //<---need to declare 
    schemas:  [CUSTOM_ELEMENTS_SCHEMA]    //<---added this line 
}) 

そしてディレクティブを削除：[MyComponentComponent] AppComponentから。

Answer 2

Angular2コンポーネントデコレータは、他のコンポーネントの埋め込みにこれらを使用しなくなりました。代わりに、entryComponentsという新しいメタデータを使用する必要があります。あなたが角度CLIを使用した場合、新しいコンポーネントは自動的にインポートして、コメントを追加します

@Component({ 
    selector: 'app-vehicle-list', 
    templateUrl: './vehicle-list.component.html', 
    styleUrls: ['./vehicle-list.component.css'], 
    providers: [VehicleService] 
}) 

Answer 3

...車両リストコンポーネントは、以下のコンポーネントメタデータを持っている...例として、以下の

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    entryComponents:[VehicleListComponent] 
}) 

を参照してください。 app.module.ts内の@ngmoduleの宣言セクションに移動します。そのためにコードを書く必要はありません。

Answer 4

次の2つのオプションがあります。

1：コンポーネント

2の内部使用entryComponentsタグ：それを自動的にインポート使用角度CLIを、私たちは、明示的にそのためのコードを記述する必要はありません。

Answer 5

コンポーネントの作成コマンドを実行した後、ANGULAR 4以上で何もする必要はありません。このエラーは、新しいコンポーネントのメタデータファイル（componentname.component.tsなど）の右のセレクタ名を使用していない可能性が最も高いです。