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

Question

У меня есть общий компонент под названием GoComponent, который я хочу использовать в 2 модулях: 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>
"): 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

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

Answer 1

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

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

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

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

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

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

Смотрите также

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

Answer 2

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

Узнайте больше информации здесь

Надеюсь, это поможет!