2017-06-08 21 views
25

私は他のモジュールのAppModule内で作成したコンポーネントを使用しようとしています。私は、各ページが(例えば、顧客モジュール)別のモジュールに保持されたページのディレクトリに自分のページを保つ Overall project structure角2 'コンポーネント'は既知の要素ではありません

と:

"Uncaught (in promise): Error: Template parse errors:

'contacts-box' is not a known element:

  1. If 'contacts-box' is an Angular component, then verify that it is part of this module.
  2. If 'contacts-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

マイプロジェクトの構造は非常にシンプルです。でも、私は次のエラーを取得します各モジュールには複数のコンポーネント(customers-list-component、customers-add-componentなど)があります。私はそれらのコンポーネントの中で私のContactBoxComponentを使用したいと思います(例えばcustomer-add-componentの内部)。

あなたはそれがAppModule内で基本的にですので、私はウィジェットディレクトリ内の連絡先・ボックス・コンポーネントを作成する見ることができるように。 ContactBoxComponentのインポートをapp.module.tsに追加し、それをAppModuleの宣言リストに入れました。それはうまくいきませんでしたので、私は自分の問題を探り、ContactBoxComponentを追加してリストをエクスポートしました。助けてくれなかった。私もCustomersAddComponentにContactBoxComponentを入れてみましたが、別のモジュール(別のモジュールから)に入れてみましたが、複数の宣言があるというエラーがありました。

私には何が欠けていますか?

答えて

40

これは、このようなエラーが発生したときに実行する5つのステップです。

  • あなたは名前が正しいことを確認していますか? (コンポーネントで定義されているセレクタもチェックしてください)
  • モジュール内のコンポーネントを宣言しますか?
  • 別のモジュールにある場合は、コンポーネントをエクスポートしますか?
  • 別のモジュールにある場合は、そのモジュールをインポートしますか?
  • cliを再起動しますか?

I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

あなたは二度のコンポーネントを宣言することはできません。

+0

あなたのステップは、私を助けていないが、私は2角度にかなり新しいですので、多分それはですので、私は」それらに答えて、おそらく一緒に解決策を見つけ出すでしょう。私は名前が正しいと確信しています、私はAppModuleのコンポーネントを宣言し、私はAppModuleでコンポーネントをエクスポートし、cliを再起動しました。私もCustomersAddComponentでAppModuleをインポートしようとしましたが、エラー:最大呼び出しスタックサイズを超過しました(AppModuleをAngular 2にインポートしないと思います)。 – Aranha

+2

あなたのコンポーネントを宣言して、AppModuleではなくSepperateモジュールでエクスポートする必要があります。次に、コンポーネントを使用するために、この新しいモジュールを永続的にインポートする必要があります。 –

+1

さて、私は今それを得る。唯一の質問は、新しく作成したモジュール(WidgetsModule)をインポートすると、内部で宣言されたコンポーネントがaaaaaall読み込まれますか?それはいくつかのオーバーヘッドですが、多分私は何かを誤解しています。私はもちろんContactsBoxModuleを作成することができますが、それは1つの小さなコンポーネントの場合と同様です。何かヒント? – Aranha

3

まったく同じ問題がありました。ここに掲載されたソリューションのいくつかを試す前に、コンポーネントが実際にが機能しないかどうかを確認したい場合があります。私の場合、IDE(WebStorm)にエラーが表示されましたが、ブラウザで実行したときにコードが正常に機能していました。

のターミナルをシャットダウンした後、メッセージが表示されなくなりました。

+0

問題はide固有です。 webstormにも同じ問題があります。 Webstormにはangle-cliによる変更が通知されていないので、新しいコンポーネントが表示されるようにIDEを再起動する必要があります。 – skiabox

+0

私はVSコードでもイオン2と同じ問題があります。あるコンポーネントでは、** ion- *は既知の要素ではありません**というエラーがあります。 ** ionic serve **を停止するようあなたの提案を試み、IDEを再起動しましたが、何も動作しません。あなたはこれのための別の解決策を知っていますか?ところで、コードはとにかく動作します。 –

関連する問題