Угловая структура приложения 2: зависимости кругового модуля

Question

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

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

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

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

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

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

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

Answer 1

Моим решением было переместить те компоненты, которые заставляли меня иметь циклическую зависимость (в данном случае villains-button.component и heroes-button.component), в модуль Shared.

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

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

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