web-dev-qa-db-ja.com

Angular 2 'component'は既知の要素ではありません

AppModule内で作成したコンポーネントを他のモジュールで使用しようとしています。私はしかし、次のようなエラーが出ます：

"（約束されていない）捕捉されなかった：Error：テンプレート解析エラー：

'contacts-box'は既知の要素ではありません。

  1. 'contacts-box'がAngularコンポーネントである場合は、それがこのモジュールの一部であることを確認してください。
  2. 'contacts-box'がWebコンポーネントの場合は、このメッセージを抑制するために、このコンポーネントの '@ NgModule.schemas'に 'CUSTOM_ELEMENTS_SCHEMA'を追加してください。

私のプロジェクト構造は非常に単純です： Overall project structure

私は自分のページをpagesディレクトリに保存します。各ページは異なるモジュール（たとえばcustomers-module）に保存され、各モジュールは複数のコンポーネント（customers-list-component、customers-add-componentなど）を持ちます。私はこれらのコンポーネントの中で（例えばcustomers-add-componentの中で）私のContactBoxComponentを使いたいです。

お分かりのように、私はwidgetsディレクトリの中にcontacts-boxコンポーネントを作成したので、それは基本的にAppModuleの中にあります。 ContactBoxComponentインポートをapp.module.tsに追加し、それをAppModuleの宣言リストに入れました。うまくいかなかったので、私は私の問題をグーグルし、エクスポートリストにもContactBoxComponentを追加しました。助けにはならなかった。また、私はCustomersAddComponentにContactBoxComponentを入れてから（別のモジュールから）別のものに入れようとしましたが、複数の宣言があるというエラーが表示されました。

何が足りないの？

angulartypescriptangular-componentsangular-module
78
Aranha

これらのエラーが発生したときに実行する5つの手順は、次のとおりです。

  • 名前は正しいですか？ （コンポーネントに定義されているセレクタも確認してください）
  • モジュール内のコンポーネントを宣言しますか？
  • 他のモジュールにある場合は、コンポーネントをエクスポートしますか？
  • 他のモジュールにある場合は、そのモジュールをインポートしますか？
  • Cliを再起動しますか？

また、私はCustomersAddComponentにContactBoxComponentを入れてから（別のモジュールから）別のものに入れようとしましたが、複数の宣言があるというエラーが表示されました。

コンポーネントを2回宣言することはできません。コンポーネントを宣言して新しい別のモジュールにエクスポートする必要があります。次に、この新しいモジュールをあなたのコンポーネントを使いたいすべてのモジュールにインポートするべきです。

いつ新しいモジュールを作成すべきか、いつ作成すべきでないかを見分けるのは難しいです。私は通常、再利用するコンポーネントごとに新しいモジュールを作成します。ほとんどどこにでも使用するコンポーネントがいくつかある場合は、それらを1つのモジュールにまとめます。再利用しないコンポーネントがある場合は、別のモジュールが必要になるまで別のモジュールを作成しません。

すべてのコンポーネントを1つのモジュールに収めるのは魅力的かもしれませんが、これはパフォーマンスには良くありません。開発中、モジュールは変更が行われるたびに再コンパイルする必要があります。モジュールが大きいほど（コンポーネントが多いほど）時間がかかります。大きなモジュールに小さな変更を加えるのは、小さなモジュールに小さな変更を加えるよりも時間がかかります。

166
Robin Dijkhof

私はちょうど同じ問題を抱えていました。ここに掲載されているいくつかの解決策を試す前に、コンポーネント 本当に が機能しないかどうかを確認してください。私にとっては、エラーが私のIDE（WebStorm）に表示されていましたが、ブラウザで実行したときにコードが完全に機能することがわかりました。

（ng serveを実行していた）端末をシャットダウンした後、 および IDEを再起動したところ、メッセージが表示されなくなりました。

13
harryvederci

私は同様の問題を抱えていました。 ng generate component（CLIバージョン7.1.4を使用）はAppModuleに子コンポーネントの宣言を追加しますが、それをエミュレートするTestBedモジュールには追加しません。

"Tour of Heroes"サンプルアプリには、セレクタapp-heroesを含むHeroesComponentが含まれています。アプリは配信されたときに問題なく動作しましたが、ng testはこのエラーメッセージを生成しました：'app-heroes' is not a known element。 （app.component.spec.ts内の）HeroesComponent内の宣言にconfigureTestingModuleを手動で追加すると、このエラーがなくなります。

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}
11
Jan Hettich

同じ発行幅のphp storm version 2017.3があります。これは私のためにそれを修正： intellijサポートフォーラム

それはエラー幅@angular言語サービスでした： https://www.npmjs.com/package/@angular/language-service

3
milan

私の場合の問題は、モジュール内のコンポーネント宣言が欠落していたことでしたが、宣言を追加した後でもエラーは続きました。エラーをなくすために、サーバーを停止し、VS Codeでプロジェクト全体を再構築しました。

0
Eternal21

私の場合、アプリには複数のモジュールレイヤーがあったため、インポートしようとしたモジュールは、pages.module.tsではなくapp.module.tsを実際に使用するモジュールの親に追加する必要がありました。

0
Kof

私は同じ問題を抱えていました、そしてそれは異なった機能モジュールが誤ってこのコンポーネントを含んでいたために起こっていました。他の機能からそれを削除したとき、それは働いた！

0
Vladimir Mitic