web-dev-qa-db-ja.com

typescriptを使用してmy angular 2アプリに新しいコンポーネントを追加できません

Angular 2 CLIを使用しており、ng generate component MyComponentでコンポーネント「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() {
  }

}
angulartypescriptatom-editorangular-components
17
Philip Feldmann

エラー自体は、ディレクティブが存在しないコンポーネントは廃止されたためです。以下に示すこのコードを試してください、

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
})

そしてdirectives：[MyComponentComponent]をAppComponentから削除します。

18
micronyks

Angular2 Componentデコレーターは、これらを他のコンポーネントの埋め込みに使用しなくなりました。代わりにentryComponentsと呼ばれる新しいメタデータを使用する必要があります。例として以下を参照してください...

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

Vehicle-list-componentには、次のコンポーネントメタデータがあります。

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

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

1
Jujhar Singh

Angular CLIを使用すると、新しいコンポーネントが自動的にインポートされ、app.module.tsの@ngmoduleの宣言セクションに追加されます。そのためのコードを記述する必要はありません。

1
Surajit Mukherjee

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

1：コンポーネント内でentryComponentsタグを使用する

2：Angular自動的にインポートするCLIを使用するため、明示的にコードを記述する必要はありません。

0
Piyush Nikam