Angular 2 Application Structure: Circular Module Dependencies

Question

There is a recommendation for the directory structure in the Angular 2 style guide: https://angular.io/docs/ts/latest/guide/style-guide.html#04-06

I usually find this a good recommendation, I would intend to do something very similar. However, I ran into a problem, and I'm curious if anyone has resolved it.

Please note that the module heroescontains a directory sharedwith heroes-button.component. Presumably, we will want to use this component throughout the application (hence, "shared").

Similarly, the module villainscontains a directory sharedwith villains-button.component.

If I want to use villains-button.componentin some place in the module heroesand heroes-button.componentin the module villains, then I get a circular link.

In short: Angular does not allow me to import ModuleA into ModuleB, and ModuleB into ModuleA, but the style guide says otherwise.

Does anyone have solutions for this scenario?

Answer 1

My solution was to move those components that made me have a circular dependency (in this case, the villains-button.component and heroes-button.component) in the Shared module.

At the end, the directory structure is as follows:

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

, , , "Hero" Hero, , , , Angular . , .