Angular同抽象类服务调用引发循环依赖的解决方案

问题背景 #

你想要实现一个服务调用另一个同抽象类的服务，两者都通过依赖注入实现，但运行时遇到了循环依赖错误：

Provider parse errors: Cannot instantiate cyclic dependency! Service ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

你的代码结构如下：

export abstract class Service { abstract getTitle(): string; } 

@Injectable({ providedIn: "root" }) 
export class BService extends Service { 
  getTitle() { return "from B"; } 
} 

@Injectable({ providedIn: "root" }) 
export class AService extends Service { 
  constructor(private service: Service) { super() } 
  getTitle() { return this.service.getTitle(); } 
} 

@NgModule({ providers: [{ provide: Service, useClass: BService }] }) 
export class AModule {} 

@NgModule({ 
  imports: [BrowserModule, FormsModule, AModule], 
  declarations: [AppComponent, HelloComponent], 
  bootstrap: [AppComponent], 
  providers: [{ provide: Service, useClass: AService }] 
}) 
export class AppModule {} 

export class HelloComponent { 
  title: string; 
  constructor(service: Service) { this.title = service.getTitle(); }
}

问题原因 #

循环依赖的根源很明确：

• 你在AppModule里把抽象类Service的实现指向了AService
• 但AService的构造函数又依赖抽象类Service

这就形成了死循环：Angular要创建AService实例，得先拿到Service的实例，可Service又被配置成了AService，完全套娃了。

解决方案（不重复代码） #

下面给你三种可行的方案，都不需要重复代码：

方案1：通过Injector延迟获取依赖

修改AService，注入Injector而非直接注入Service，在构造完成后再获取依赖实例，直接打破循环：

import { Injectable, Injector } from '@angular/core';
import { Service } from './service';

@Injectable({ providedIn: "root" }) 
export class AService extends Service { 
  private service: Service;

  constructor(private injector: Injector) { 
    super();
    // 延迟获取实例，避开构造阶段的循环检测
    setTimeout(() => {
      this.service = this.injector.get(Service);
    });
  } 

  getTitle() { 
    return this.service.getTitle(); 
  } 
}

这种方法简单直接，不需要修改模块配置，不过依赖Injector，适合简单场景。

方案2：为BService创建独立的注入令牌

通过自定义令牌明确AService依赖的是BService，而非抽象的Service，从根源上避免循环：

1. 先定义注入令牌：

import { InjectionToken } from '@angular/core';
import { Service } from './service';

export const B_SERVICE = new InjectionToken<Service>('B_SERVICE');

2. 修改AModule的提供者配置：

@NgModule({ 
  providers: [
    BService,
    { provide: B_SERVICE, useExisting: BService }
  ] 
}) 
export class AModule {}

3. 修改AService的构造函数，使用令牌注入：

import { Injectable, Inject } from '@angular/core';
import { Service } from './service';
import { B_SERVICE } from './tokens';

@Injectable({ providedIn: "root" }) 
export class AService extends Service { 
  constructor(@Inject(B_SERVICE) private service: Service) { 
    super();
  } 

  getTitle() { 
    return this.service.getTitle(); 
  } 
}

这种方法最清晰，明确了依赖关系，符合依赖注入的最佳实践，我个人更推荐这种方案。

方案3：使用工厂提供者创建AService

在AppModule中通过工厂函数明确传入BService实例给AService，绕开循环检测：

@NgModule({ 
  imports: [BrowserModule, FormsModule, AModule], 
  declarations: [AppComponent, HelloComponent], 
  bootstrap: [AppComponent], 
  providers: [
    BService,
    { 
      provide: Service, 
      useFactory: (bService: BService) => new AService(bService),
      deps: [BService] // 声明工厂依赖的服务
    }
  ] 
}) 
export class AppModule {}

AService的代码可以完全保持不变，这种方法适合需要动态创建实例的复杂场景。

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