Angular错误模块之间的循环依赖

Question

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

这里是一些简化的代码：

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

问题是我的 AssetsModule 包含在 SharedModule 中使用的组件，而我的 SharedModule 包含在我的 AssetsModule.[=21 中使用的组件=]

我将所需的模块添加到相应模块文件的 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 给我一个问题，我的应用程序在浏览器中崩溃了。

Cyclic dependency between modules: SharedModule -> AssetsModule -> SharedModule Inspection info: Reports cyclic dependencies between Angular modules.

如何解决这个错误？

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

Answer 1

您需要重组您的应用程序结构。

你基本上有两个选择。

缩小依赖关系，仅从一侧导入

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

Angular错误模块之间的循环依赖

Angular Error Cyclic dependency between modules

circular-dependency

angular