'<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がWebコンポーネントの場合は、このコンポーネントのに追加CUSTOM_ELEMENTS_SCHEMAして@NgModule.schemas、このメッセージを抑制します。

助けてください。

あなたMyComponentComponentはにいる必要がありMyComponentModuleます。

そしてでMyComponentModuleは、MyComponentComponent内部を「エクスポート」に配置する必要があります。

このような何か、以下のコードを参照してください。

@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をご覧ください。

乾杯！

たぶんこれは htmlタグコンポーネントのです

で使用します htmlこのようなものでます<mycomponent></mycomponent>

これを使用する必要があります <app-mycomponent></app-mycomponent>

あなたのapp.module.tsようにそれをインポートし、ディレクティブビットを削除します：-

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

あなたMyComponentModuleはこのようになるはずです：-

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

filename.component.tsのセレクタを確認してください

さまざまなhtmlファイルでタグを使用すると、

<my-first-component></my-first-component>

する必要があります

<app-my-first-component></app-my-first-component>

例

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

私の場合、サブコンポーネントを使用するコンポーネントの単体テストを作成しており、それらのサブコンポーネントがテンプレート内にあることを確認するためのテストを作成していました。

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  }); 

エラーは発生しませんでしたが、警告：

警告：「app-interview」は既知の要素ではありません：

1. 「app-interview」がAngularコンポーネントの場合は、それがこのモジュールの一部であることを確認してください。警告：「app-interview」は既知の要素ではありません：
2. 「app-interview」がAngularコンポーネントの場合、それがこのモジュールの一部であることを確認してください。
3. 「app-interview」がWebコンポーネントの場合は、「CUSTOM_ELEMENTS_SCHEMA」をこのコンポーネントの「@ NgModule.schemas」に追加して、このメッセージを抑制します。

また、テスト中にサブコンポーネントがブラウザ内に表示されませんでした。

以前ng g c newcomponentはすべてのコンポーネントを生成していたので、それらはすでにappmoduleで宣言されていましたが、指定したコンポーネント用のテストモジュールではありませんでした。

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

MyComponentComponentは、AppComponentの同じモジュールで宣言する必要があります。

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

1. あなたの宣言MyComponentComponentではMyComponentModule
2. MyComponentComponentにexports属性を 追加MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. MyComponentModuleAppModule imports属性にを追加します

app.module.ts

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

重要それでもエラーが発生する場合は、サーバーctrl+cをターミナルから停止して、もう一度実行してくださいng serve -o

私の場合、共有モジュールにコンポーネントがありました。

コンポーネントは読み込まれていてうまく機能していましたが、typescriptはhtmlタグを赤い線で強調表示しており、このエラーメッセージが表示されていました。

このコンポーネントの中で、rxjsオペレーターをインポートしていないことに気付きました。

import {map} from 'rxjs/operators';

このインポートを追加すると、エラーメッセージが消えました。

コンポーネント内のすべてのインポートを確認します。

それが誰かを助けることを願っています。

親コンポーネントが宣言されているモジュールを確認してください...

親コンポーネントが共有モジュールで定義されている場合、子モジュールもそうである必要があります。

親コンポーネントは、ファイルのディレクトリ構造/命名に基づいて論理的なモジュールではなく、共有モジュールで宣言できます。AngularCLIでも、私の場合は間違ったモジュールに追加されています。

あなたが持っていることを願っていますapp.module.ts。あなたにはapp.module.tsライン-以下のアドオン

 exports: [myComponentComponent],

このような：

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

components.module.tsで、IonicModuleを次のようにインポートする必要があります。

import { IonicModule } from '@ionic/angular';

次に、次のようにIonicModuleをインポートします。

  imports: [
    CommonModule,
    IonicModule
  ],

したがって、components.module.tsは次のようになります。

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

やめろexport **default** class MyComponentComponent！

特定の質問ではないにしても、タイトルに該当する可能性がある関連する問題：

誤ってしました...

export default class MyComponentComponent {

...そしてそれも物事を台無しにした。

どうして？VSコードは、それをに入れたときにモジュールにインポートを追加しましたdeclarationsが、代わりに...

import { MyComponentComponent } from '...';

持っていた

import MyComponentComponent from '...';

また、デフォルトのインポートではどこにも「実際に」名前が付けられていなかったためと考えられます。

export class MyComponentComponent {

いいえdefault。利益。