Многие модули, использующие один и тот же компонент, вызывают ошибку - Angular 2

У меня есть общий компонент под названием GoComponent, который я хочу использовать в двух модулях: FindPageModule и AddPageModule.

Когда я добавляю его в объявлениях "FindPageModule" и в моем "AddPageModule", я получаю сообщение об ошибке:

find: 21 Ошибка: (SystemJS) Тип GoComponent является частью деклараций из 2 модулей: FindPageModule и AddPageModule! Рассмотрите возможность перемещения GoComponent к более высокому модулю, который импортирует FindPageModule и AddPageModule. Вы также можете создать новый NgModule, который экспортирует и включает GoComponent, затем импортирует этот NgModule в FindPageModule и AddPageModule.

Поэтому я беру их из них и добавляю в объявления AppModule, которые импортируют FindPageModule и AddPageModule, и я получаю сообщение об ошибке в компоненте, называемом FindFormComponent, который находится в объявлениях FindPageModule и использует "GoComponent":

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>
"): [email protected]: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>
"): [email protected]:4

Как включить компоненты, такие как FindFormComponent, которые объявлены в FindPageModule, использовать GoComponent, а также позволить компонентам, объявленным AddPageModule, использовать GoComponent?

Ответ 1

Да, компоненты могут быть объявлены только в одном модуле и ни один из них не будет унаследован, что означает, что объявление его в главном модуле приложения не даст вам доступ к нему ни в каком другом модуле.

Если у вас есть компонент, который используется другими модулями, как правило, они идут, чтобы поместить его в общий модуль

Включить компонент в общий модуль:

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

Как использовать общий модуль в другом месте:

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

См. также

Angular2 Как очистить AppModule

Ответ 2

Если вы хотите использовать GoComponent для нескольких модулей, вы должны создать "общий" модуль и добавить GoComponent в общий доступ к модулю. Затем вы импортируете общий модуль в свои другие модули, где вы хотите использовать этот компонент.

Узнайте больше на здесь

Надеюсь на эту помощь!