模块之间的角度错误循环依赖性[重复]答案

【问题标题】：Angular Error Cyclic dependency between modules [duplicate]模块之间的角度错误循环依赖性[重复]
【发布时间】：2021-07-07 09:39:37
【问题描述】：

我有一个 Angular 应用程序和一个包含两个子模块的 app.module.ts 文件。

这里是一些简化的代码：

// app.module.ts
@NgModule({
  imports: [
    AssetsModule,
    SharedModule
  ]

问题是我的AssetsModule 包含在SharedModule 中使用的组件，而我的SharedModule 包含在我的AssetsModule 中使用的组件。

我将所需的模块添加到相应模块文件的imports 中，就像这样（请注意，我的模块包含许多组件，为了便于阅读，我这里只有一个）

// assets.module.ts
@NgModule({
  declarations: [AssetsComponent],
  imports: [
    CommonModule,
    SharedModule
  ],
  exports: [AssetsComponent]
})
export class AssetsModule {}


// shared.module.ts
@NgModule({
  declarations: [ChartComponent],
  imports: [
    CommonModule,
    AssetsModule
  ],
  exports: [ChartComponent]
})
export class SharedModule {}

现在 IDE 给我一个问题，我的应用程序在浏览器中崩溃了。

模块之间的循环依赖：SharedModule -> AssetsModule -> SharedModule 检查信息：报告之间的循环依赖关系 Angular 模块。

如何解决此错误？

我可以只在app.module.ts 中声明所有组件，但这不是很优雅、模块化，甚至可能是一种反模式。我不想将这两个模块合二为一，因为我会有其他模块需要共享组件。

【问题讨论】：

这个问题已经被问了十几次了，主要的答案总是一样的——重构你的应用程序。 stackoverflow.com/questions/52392550/…

标签： angular circular-dependency

【解决方案1】：

您需要重组应用结构。

你基本上有两种选择。

窄依赖，只从一侧导入

或者声明第三个模块并将两者都使用的组件移到那里（在这种情况下，我将使用名称“shared”作为新名称

【讨论】：