共享单例服务并避免共享组件中的循环依赖

技术堆栈

该项目使用在本地 NPM 服务器上运行的 Angular 2 和 TypeScript，并使用 Angular CLI 构建。

架构

该项目共有三个模块。第一个用于非 UI 服务和组件。第二个是 UI 组件和布局。第三个也是最后一个模块用于 UI 服务。它们被细分如下图所示：

正如您所看到的，我真的不确定这里是否需要父模块，因此最上面的项目“？父模块？”

问题

1. 跨多个模块共享服务的单例
2. 当两个模块需要彼此运行时避免循环依赖

问题 1 - 跨多个模块共享服务单例

就我而言，我需要用户界面模块 and 非UI模块共享所有服务的单例用户界面服务模块.

我尝试过的

到目前为止我已经尝试使用forRoot()无济于事，并尝试将服务本身移动到父模块并从那里提供它们。无论我做什么，我似乎都无法让两个模块从 UI 服务模块共享一个单例。

问题 2 - 当两个模块相互需要时避免循环依赖

我在应用程序中面临的另一个问题是，一个模块的一部分需要另一个模块的所有部分，而另一个模块又需要第一个模块的部分才能工作。

在非 UI 模块中，您将看到页眉/页脚需要使用 UI 模块才能发挥作用。但是，在 UI 模块中，布局需要访问页眉/页脚，以便将这些项目作为布局的一部分提供。这形成了一种循环依赖，我无法完全消除它。

我尝试过的

我考虑过将布局从 UI 模块移到自己的模块中，但是它们也需要对 UI 模块的组件部分的引用，因此，如果我一旦导入该模块，我就会再次创建循环依赖项。

解决方案

我需要一种方法来消除循环依赖，并以某种方式在所有其他模块之间共享 UI 服务模块中所有服务的单例。

我已经连续一周试图找到解决这两个问题的方法了，我想在这一点上我只见树木不见森林。我确信我错过了一些愚蠢的事情，但我似乎无法解决这个问题。

Have a CoreModule它只提供不依赖于任何其他模块的服务，并且这些服务预计是单例的。该模块应由 root 导入AppModule仅有的。这将保证这些服务是单例的（它们仅在CoreModule）。在我的应用程序中，这是我提供全球服务的地方，例如AuthService。这将解决您的单例问题。

Have a SharedModule导出组件、指令，甚至由多个模块共享的 Angular 模块。在我自己的应用程序中，该模块包含我到处使用的组件，例如DialogComponent，或者 Angular 自己的FormsModule and CommonModule. This SharedModule does not为您提供全球服务。将此模块导入到所有其他模块中。这将解决您的循环依赖问题。

简而言之，你可以想到CoreModule and SharedModule作为辅助模块。它们本身不会构建您的网站，但它们提供您的网站模块所需的依赖项。您可能会受益于阅读本章 https://angular.io/guide/ngmodule文档，然后返回到您的项目。