Angular 2 应用结构：循环模块依赖答案

【问题标题】：Angular 2 Application Structure: Circular Module DependenciesAngular 2 应用结构：循环模块依赖
【发布时间】：2016-10-13 18:52:59
【问题描述】：

在 Angular 2 样式指南中，有一个目录结构的建议：https://angular.io/docs/ts/latest/guide/style-guide.html#04-06

我通常认为这是一个很好的建议，我打算自己做一些非常相似的事情。但是，我遇到了一个问题，我很好奇是否有人解决了它。

注意heroes 模块包含一个shared 目录和一个heroes-button.component。大概，我们希望在整个应用程序中使用这个组件（因此，“共享”）。

同样，villains 模块包含一个带有villains-button.component 的shared 目录。

如果我想在heroes 模块中的某个地方使用villains-button.component 并在villains 模块中使用heroes-button.component，那么我将以循环引用结束。

简而言之：Angular 不允许我将 ModuleA 导入 ModuleB，并将 ModuleB 导入 ModuleA，但样式指南另有说明。

有没有人有针对这种情况的解决方案？

【问题讨论】：

样式指南建议在每个模块之间共享的组件位于共享目录中，并且不会在该目录之外引用。跨模块共享的组件在上层共享目录/app/shared
您找到解决方案了吗？我遇到了同样的问题，模块 A 加载到模块 B 中，模块 B 加载到模块 A 中。在编译应用程序时，我遇到了“超出最大调用堆栈大小错误”的错误。
@ParikhVaibhav，我刚刚为下面的提问者添加了我如何解决这个问题。让我知道这是否有帮助。
@daniel：谢谢你的回答。我想知道的是我们如何为包含路由的模块执行此操作。请看下面的问题。stackoverflow.com/q/43907450/853523

标签： angular angular2-modules

【解决方案1】：

我对此的解决方案是将那些迫使我具有循环依赖的组件（在本例中为vilins-button.component 和 heros-button.component）移动到共享模块中。

最后目录结构是这样的：

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

感觉可能不对，因为您认为“Hero”按钮属于其他 Hero 的东西，但回想起来，随着我的应用程序的增长，我很高兴 Angular 禁止了模块之间的循环依赖。随着应用程序的发展，这是一种非常危险的模式。

【讨论】：