[解決済み] <selector>' が Angular コンポーネントの場合、それがこのモジュールの一部であることを確認する。

質問事項

私はAngular2の初心者です。コンポーネントを作成しようとしたのですが、エラーが表示されます。

これは app.component.ts ファイルを作成します。

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

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

これは、私が作りたいコンポーネントです。

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

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

2つのエラーを表示する。

1. もし my-component が Angular コンポーネントである場合、それがこのモジュールの一部であることを確認します。
2. もし my-component がウェブコンポーネントである場合 CUSTOM_ELEMENTS_SCHEMA を @NgModule.schemas というメッセージが表示されます。

助けてください。

どのように解決するのですか？

あなたの MyComponentComponent の中にあるはずです。 MyComponentModule .

そして、その中に MyComponentModule を配置する必要があります。 MyComponentComponent の内側で、quot;exports"とします。

こんな感じで、以下のコードをご覧ください。

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

を配置し MyComponentModule の中に imports で app.module.ts のようにします（下記コード参照）。

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

このようにすると、コンポーネントのセレクタがアプリに認識されるようになります。

詳しくはこちらで解説しています。 https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

乾杯