Структура приложения Angular 2: циклические зависимости модуля

В Руководстве по стилю Angular 2 есть рекомендация по структуре каталогов: https://angular.io/docs/ts/latest/guide/style-guide.html#04-06

Я вообще думаю, что это хорошая рекомендация, я бы сам хотел сделать что-то очень похожее. Однако у меня возникла проблема с этим, и мне любопытно, решил ли кто-нибудь ее.

Обратите внимание, что модуль heroes содержит каталог shared с расширением heroes-button.component. Предположительно, мы захотим использовать этот компонент во всем приложении (отсюда и «общий»).

Точно так же модуль villains содержит каталог shared с расширением villains-button.component.

Если я хочу использовать villains-button.component где-то в модуле heroes, а heroes-button.component в модуле villains, то я закончу циклической ссылкой.

Вкратце: Angular не позволяет мне импортировать ModuleA в ModuleB и ModuleB в ModuleA, но в руководстве по стилю указано иное.

У кого-нибудь есть решения для этого сценария?


person Daniel Patrick    schedule 13.10.2016    source источник
comment
Руководство по стилю предполагает, что компоненты, общие для каждого модуля, находятся в общем каталоге и не упоминаются за его пределами. Компоненты, которые являются общими для модулей, находятся в общем каталоге верхнего уровня /app/shared.   -  person silentsod    schedule 13.10.2016
comment
Вы получили решения? Я столкнулся с той же проблемой, когда модуль A загружается в модуль B, а модуль B загружается в модуль A. При компиляции приложения я столкнулся с ошибкой «ОШИБКА при превышении максимального размера стека вызовов».   -  person Parikh Vaibhav    schedule 11.05.2017
comment
@ParikhVaibhav, я только что добавил, как я решил это для будущих спрашивающих, ниже. Дайте мне знать, если это поможет.   -  person Daniel Patrick    schedule 11.05.2017
comment
@daniel: Спасибо за ответ. Мне было интересно, как мы можем сделать это и для модуля, содержащего маршруты. пожалуйста, смотрите ниже вопрос SO.   -  person Parikh Vaibhav    schedule 12.05.2017


Ответы (1)


Мое решение состояло в том, чтобы переместить те компоненты, которые вынуждали меня иметь циклическую зависимость (в данном случае, злодеи-кнопка.компонент и герои-кнопка.компонент) в общий модуль.

В итоге структура каталогов выглядит так:

HeroesModule
    -HeroComponentA
    -HeroComponentB
VillainsModule
     -VillainComponentA
     -VillainComponentB
SharedModule
     -HeroButton
     -Villain Button    <-- these two are now available across the application

Это может показаться неправильным, потому что вы думаете, что кнопка «Hero» связана с другими вещами Hero, но, оглядываясь назад, когда мое приложение выросло, я очень рад, что Angular запрещает круговые зависимости между модулями. Это очень опасный шаблон для поддержки по мере роста приложения.

person Daniel Patrick    schedule 11.05.2017