如何避免Angular共享模块间的循环依赖？

嗨，针对你遇到的SharedModule和LoadingModule之间的循环依赖问题，我整理了几个实用的解决思路，结合Angular的最佳实践来帮你搞定：

1. 拆分共享模块，分离基础依赖与组件模块 #

最常见的解决方式是把原来的SharedModule拆分成基础UI依赖模块和通用组件集合模块：

• 创建一个BaseUiModule，专门存放所有第三方通用依赖（比如Angular Material的各个模块、ReactiveFormsModule这些），只做导入和导出，不包含自定义组件；
• 让SharedModule和LoadingModule都依赖这个BaseUiModule，而不是互相依赖。

举个具体的代码调整例子：

第一步：创建BaseUiModule #

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatSnackBarModule, MatButtonModule, MatCheckboxModule, MatRadioModule, MatIconModule, MatInputModule, MatProgressSpinnerModule, MatDialogModule } from '@angular/material';

@NgModule({
  imports: [
    MatSnackBarModule,
    ReactiveFormsModule,
    MatButtonModule,
    MatInputModule,
    MatCheckboxModule,
    MatRadioModule,
    MatIconModule,
    MatProgressSpinnerModule,
    MatDialogModule
  ],
  exports: [
    MatSnackBarModule,
    MatButtonModule,
    MatInputModule,
    MatCheckboxModule,
    MatRadioModule,
    MatIconModule,
    ReactiveFormsModule,
    MatProgressSpinnerModule,
    MatDialogModule
  ]
})
export class BaseUiModule {}

第二步：调整SharedModule #

让SharedModule导入BaseUiModule和LoadingModule，并导出它们：

import { NgModule } from '@angular/core';
import { BaseUiModule } from './base-ui.module';
import { LoadingModule } from './components/loading/loading.module';

@NgModule({
  imports: [
    BaseUiModule,
    LoadingModule
  ],
  exports: [
    BaseUiModule,
    LoadingModule
  ],
  providers: [...]
})
export class SharedModule {}

第三步：调整LoadingModule #

让LoadingModule直接依赖BaseUiModule（或者只导入它实际需要的单个模块，比如MatProgressSpinnerModule），不再依赖SharedModule：

import { NgModule } from '@angular/core';
import { BaseUiModule } from '../base-ui.module';
import { LoadingComponent } from './loading.component';

@NgModule({
  imports: [
    BaseUiModule // 或者按需导入：MatProgressSpinnerModule
  ],
  declarations: [LoadingComponent],
  exports: [LoadingComponent]
})
export class LoadingModule {}

2. 让组件模块直接导入所需依赖，而非整个SharedModule #

如果不想拆分模块，另一个简单的方法是：让LoadingModule不再依赖SharedModule，而是直接导入它需要的具体依赖项。比如LoadingComponent需要用到MatProgressSpinnerModule，那就在LoadingModule的imports数组里直接添加这个模块，而不是通过SharedModule间接导入。

这种方式的核心是遵循最小依赖原则——每个模块只导入自己真正需要的东西，避免依赖一个庞大的共享模块，从根源上减少循环依赖的可能。

3. 重新审视SharedModule的职责 #

Angular的最佳实践里，SharedModule的定位应该是**“共享工具集合”**，用来导出那些被绝大多数业务模块频繁使用的通用模块（比如Forms、Material基础组件）和无状态组件。

如果LoadingModule只是被部分业务模块使用，其实不需要把它放进SharedModule里，而是让需要它的业务模块直接导入LoadingModule即可。这样既减轻了SharedModule的负担，也避免了不必要的依赖链。

内容的提问来源于stack exchange，提问作者Ruslana