[解決済み] Angular 2の「コンポーネント」は既知の要素ではありません。

質問

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

"アンキャッチ（プロミス内）。Error: テンプレートパースエラーです。

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

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

私のプロジェクト構造は非常にシンプルです。

私はpagesディレクトリにページを保持し、各ページは異なるモジュール（例えば、顧客モジュール）に保持され、各モジュールは複数のコンポーネント（顧客-リスト-コンポーネント、顧客-追加-コンポーネントなど）を持っています。私はそれらの部品の中で私のContactBoxComponentを使用したいと思う(従って例えばcustomers-add-componentの中で)。

ご覧のように、contacts-box コンポーネントは widgets ディレクトリ内に作成したので、基本的には AppModule 内にあります。ContactBoxComponentのimportをapp.module.tsに追加して、AppModuleのdeclarations listに入れました。それはうまくいかなかったので、私は私の問題をグーグルし、同様にエクスポートリストにContactBoxComponentを追加しました。しかし、それは役に立ちませんでした。また、CustomersAddComponentにContactBoxComponentを入れてから、別のもの（別のモジュールから）に入れようとしましたが、複数の宣言があるというエラーが出ました。

何が足りないのでしょうか？

解決方法は？

このようなエラーが発生した場合、私が行う5つのステップをご紹介します。

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

ユニットテスト中にエラーが発生した場合、コンポーネントの宣言またはモジュールのインポートを TestBed.configureTestingModule

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

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

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

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