web-dev-qa-db-ja.com

同じコンポーネントを使用する多くのモジュールでエラーが発生します-Angular 2

FindComponentとAddPageModuleという2つのモジュールで使用するGoComponentという共有コンポーネントがあります。

「FindPageModule」の宣言と「AddPageModule」に宣言を追加すると、エラーが発生します。

find：21エラー：（SystemJS）タイプGoComponentは、2つのモジュールの宣言の一部です：FindPageModuleおよびAddPageModule！ FindPageModuleとAddPageModuleをインポートする上位モジュールにGoComponentを移動することを検討してください。 GoComponentをエクスポートしてインクルードする新しいNgModuleを作成し、そのNgModuleをFindPageModuleおよびAddPageModuleにインポートすることもできます。

したがって、それらの両方を取り出して、FindPageModuleとAddPageModuleをインポートするAppModule宣言に追加します。FindPageModuleの宣言にあり、「GoComponent」を使用する「FindFormComponent」というコンポーネントでエラーが発生します。

zone.js:355 Unhandled Promise rejection: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
            <div style="position: relative; display: inline-block; width: 100%;">
                [ERROR ->]<go></go>
            </div>
        </div>
"): FindFormComponent@101:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'go' is not a known element:
1. If 'go' is an Angular component, then verify that it is part of this module.
2. If 'go' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" style="height:64px;">
            <div style="position: relative; display: inline-block; width: 100%;">
                [ERROR ->]<go></go>
            </div>
        </div>
"): FindFormComponent@101:4

FindPageModuleで宣言されたFindFormComponentなどのコンポーネントにGoComponentを使用させ、AddPageModuleによって宣言されたコンポーネントにGoComponentを使用させるにはどうすればよいですか？

angularng-modules
18
BeniaminoBaggins

はい、コンポーネントは1つのモジュールでのみ宣言でき、そのアクセスはどのような方法でも継承されません。つまり、メインアプリモジュールで宣言しても、他のモジュールではアクセスできません。

他のモジュールで使用されるコンポーネントがある場合、一般的には、共有モジュールに配置する方法があります

共有モジュールにコンポーネントを含める：

@NgModule({
  declarations: [ SharedComponent ],
  exports: [ SharedComponent ]
})
class SharedModule {}

他の場所で共有モジュールを使用する方法：

@NgModule({
  imports: [ SharedModule ]
})
class ModuleWithComponentThatUsesSharedComponent {}

関連項目

38
Paul Samsotha

複数のモジュールでGoComponentを使用する場合は、「共有」モジュールを作成し、GoComponentを共有モジュールのエクスポートに追加する必要があります。次に、このコンポーネントを使用する他のモジュールに共有モジュールをインポートします。

詳細については こちら をご覧ください

この助けを願っています！

1
Ha Hoang