Angular 17中WaitSpinnerService无法维持单例的问题及模块组织咨询

问题根源在于你每个模块都调用了CommonLibModule.forRoot()，且可能在forRoot方法中重复提供了WaitSpinnerService，加上懒加载模块拥有独立的注入器，导致每次导航到懒加载模块时都会创建新的服务实例。结合你使用providedIn: 'root'的配置，按以下步骤调整即可保证单例：

1. 修正CommonLibModule的forRoot实现 #

如果你的CommonLibModule.forRoot()方法中包含了WaitSpinnerService的providers配置，直接移除它——因为providedIn: 'root'已经让服务由根注入器提供，无需在模块中重复声明。

示例CommonLibModule代码：

@NgModule({
  imports: [],
  declarations: [],
  exports: []
})
export class CommonLibModule {
  static forRoot(): ModuleWithProviders<CommonLibModule> {
    return {
      ngModule: CommonLibModule,
      providers: [
        // 移除WaitSpinnerService，不要在这里声明
        // 保留其他需要根级配置的服务/提供商（如果有的话）
      ]
    };
  }
}

2. 确认WaitSpinnerService的providedIn配置 #

确保服务的providedIn严格设置为'root'，不要在任何模块的providers数组中再次声明该服务：

@Injectable({
  providedIn: 'root' // 必须是root，不要改为any或模块类
})
export class WaitSpinnerService {
  private waitSpinner = new EventEmitter();
  
  // 其他方法...
}

3. 调整各模块的导入逻辑 #

• AppModule：只在根模块调用一次CommonLibModule.forRoot()，其他模块一律只导入CommonLibModule本身：

  @NgModule({
    imports: [
      CommonLibModule.forRoot(), // 仅根模块调用一次
      SharedModule,
      ModuleAAA,
      ModuleBBB,
      RouterModule.forRoot(...)
    ]
  })
  export class AppModule {}
  

• SharedModule：仅导入CommonLibModule，不要调用forRoot：

  @NgModule({
    imports: [CommonLibModule],
    exports: [CommonLibModule] // 若需要共享给其他模块，可导出
  })
  export class SharedModule {}
  

• 预加载/懒加载模块（ModuleAAA/BBB/CCC/DDD）：通过SharedModule间接导入CommonLibModule，或直接导入CommonLibModule，但绝对不要调用forRoot()：

  @NgModule({
    imports: [
      SharedModule, // 或直接写CommonLibModule
      // 其他模块导入
    ]
  })
  export class ModuleCCC {}
  

4. 验证单例效果 #

在WaitSpinnerService的构造函数中添加日志：

constructor() {
  console.log('WaitSpinnerService instance created');
}

启动应用后，无论导航到哪个模块，控制台应该只会打印一次这条日志，说明服务是单例。

内容的提问来源于stack exchange，提问作者L. Kvri