Angular中使用ModuleWithProviders时如何正确导入依赖模块？

这个问题的核心在于注入器层级的差异：你通过BModule.forRoot()把BService注册到了根注入器，但AModule是导入在BModule的模块装饰器里，导致AService只存在于BModule的子注入器中。根注入器无法访问子注入器内的服务，所以BService找不到AService就报错了。

下面是两种正确的解决方式，按需选择：

方式一：封装依赖到forRoot方法（推荐，保持模块封装性） #

这种方式能让BModule自行管理对AModule的依赖，不需要根模块额外导入AModule：

1. 先给AModule添加forRoot方法，把AService的注册逻辑移到这里（确保单例）：

@Injectable() 
export class AService { 
  constructor() { } 
} 

@NgModule({ 
  imports: [CommonModule]
}) 
export class AModule {
  // 新增forRoot方法，将服务注册到根注入器
  static forRoot(): ModuleWithProviders<AModule> {
    return {
      ngModule: AModule,
      providers: [AService]
    };
  }
}

2. 修改BModule的forRoot方法，合并AModule.forRoot()的提供者，确保AService和BService都注册到根注入器：

@NgModule({
  imports: [CommonModule]
})
export class BModule {
  public static forRoot(settings: any): ModuleWithProviders<BModule> {
    // 获取AModule的根级提供者
    const aModuleRootProviders = AModule.forRoot().providers;
    
    return {
      ngModule: BModule,
      providers: [
        // 先添加AModule的服务，再添加BService
        ...(aModuleRootProviders as Provider[]),
        BService
      ]
    };
  }
}

这样当你在根模块导入BModule.forRoot()时，AService和BService都会被注册到根注入器，BService就能正常注入AService了。

方式二：根模块直接导入AModule #

如果不需要严格的封装性，也可以直接在根模块（比如AppModule）中导入AModule，这样AService会被注册到根注入器，BService就能直接找到它：

@NgModule({
  imports: [
    BrowserModule,
    AModule, // 直接在根模块导入AModule
    BModule.forRoot({/* 你的配置 */})
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

这种方式简单直接，但缺点是BModule的依赖需要根模块手动维护，不够内聚。

额外提示 #

• 从Angular 9开始，ModuleWithProviders需要指定泛型（比如ModuleWithProviders<AModule>），这样TypeScript能提供更好的类型检查。
• 对于需要全局单例的服务，尽量通过模块的forRoot方法注册，避免模块多次导入导致服务多实例。

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