Angular中为何同一服务出现两个实例？单例服务异常排查

你遇到的情况确实说明存在多个ExerciseService实例，虽然你已经用了providedIn: "root"标记为根级单例，但肯定是某个地方破坏了Angular的单例机制，下面一步步拆解：

最常见的原因：组件/模块重复声明了服务 #

Angular的依赖注入规则是：如果在组件的@Component装饰器的providers数组里声明了ExerciseService，这个组件会创建一个局部专属的服务实例，优先级高于根级单例。

比如如果你的ExerciseContainerComponent是这样写的：

@Component({
  selector: 'app-exercise-container',
  templateUrl: './exercise-container.component.html',
  providers: [ExerciseService] // 这里就是问题根源！
})
export class ExerciseContainerComponent {
  constructor(private exerciseService: ExerciseService) {
    this.exerciseService.x = 4;
  }
}

那你修改的其实是这个组件专属的ExerciseService实例的x值，而TrainingContainerComponent注入的是根级的单例实例，所以打印出来还是初始的0。

同理，如果某个模块（比如ExerciseModule）的@NgModule的providers数组里也声明了ExerciseService，懒加载该模块时也会创建新的独立实例。

验证多实例的快速方法 #

在ExerciseService的构造函数里加一行日志：

constructor() {
  super(ResourseApi.exercise, Resourse.exercise);
  console.log('ExerciseService instance created');
}

如果控制台打印多次这句话，就实锤存在多实例，接下来只需要排查哪里重复提供了服务即可。

解决方案 #

1. 移除所有组件/模块中的ExerciseService声明：

   • 检查所有使用ExerciseService的组件，确保@Component的providers数组里没有ExerciseService；
   • 检查所有模块的@NgModule的providers数组，同样移除ExerciseService的声明，只保留服务本身的providedIn: "root"配置。

2. 确认providedIn: "root"配置的有效性：
   你的ExerciseService已经正确配置了@Injectable({ providedIn: "root" })，这个配置会让Angular将服务注册为平台级单例，整个应用共享同一个实例，只要没有其他地方重复声明，就不会再出现多实例问题。

额外说明 #

如果你的应用包含懒加载模块，providedIn: "root"的服务会自动成为跨模块的单例，不需要额外配置；但如果是在模块的providers里声明服务，懒加载模块会创建独立的实例，这也是Angular官方推荐使用providedIn: "root"而非模块providers的核心原因。

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