Angular 6+：ProvidedIn 非根模块导致循环依赖

typescript

Angular 6+：ProvidedIn 非根模块导致循环依赖

在Angular应用程序开发中，依赖注入（DI）是一个非常重要的概念。它允许我们在组件、服务和模块之间共享依赖项，提高代码的可维护性和可测试性。在Angular 6及更高版本中，引入了一个新的特性：ProvidedIn。

ProvidedIn用于指定服务的提供程序，以便在根模块或某个特定模块中注册服务。这个特性的目的是简化代码，并提供更好的性能，因为Angular只会在需要时实例化服务。然而，如果ProvidedIn被错误地用于非根模块，可能会导致循环依赖的问题。

循环依赖问题的产生

循环依赖是指两个或多个模块之间存在相互依赖的关系。当使用ProvidedIn指定服务的提供程序时，如果服务被同时注入到两个或多个模块中，就会出现循环依赖的问题。

举个例子，假设我们有两个模块：ModuleA和ModuleB，它们分别依赖于ServiceA和ServiceB。如果我们在ModuleA中使用ProvidedIn指定ServiceA的提供程序，并在ModuleB中注入ServiceA，同时在ModuleB中使用ProvidedIn指定ServiceB的提供程序，并在ModuleA中注入ServiceB，就会导致循环依赖的问题。

具体来说，当Angular实例化ModuleA时，它会尝试实例化ServiceA。但是，ServiceA依赖于ModuleB中的ServiceB，因此Angular又会尝试实例化ModuleB。然而，ModuleB又依赖于ModuleA中的ServiceA，这样就形成了一个无限循环的依赖关系。

解决循环依赖问题的方法

为了解决循环依赖的问题，我们需要重新考虑服务的提供方式。通常情况下，我们应该将服务的提供程序放在根模块中，以便在整个应用程序中共享。如果服务只在特定模块中使用，可以将它们添加到模块的providers数组中。

对于上述的例子，我们可以将ServiceA和ServiceB的提供程序都放在根模块中。这样，无论在ModuleA还是ModuleB中注入这些服务，都不会产生循环依赖的问题。

下面是一个示例代码，演示了如何正确地使用ProvidedIn指定服务的提供程序：

typescript
// service-a.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ServiceA {
  constructor() { }
}
// service-b.ts
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class ServiceB {
  constructor() { }
}
// module-a.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ServiceA } from './service-a';
@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  providers: [ServiceA]
})
export class ModuleA { }
// module-b.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ServiceB } from './service-b';
@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ],
  providers: [ServiceB]
})
export class ModuleB { }
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ModuleA } from './module-a';
import { ModuleB } from './module-b';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ModuleA,
    ModuleB
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上面的示例代码中，ServiceA和ServiceB的提供程序都放在了根模块AppModule中。ModuleA和ModuleB分别依赖于ServiceA和ServiceB，但没有相互依赖的关系，因此不会导致循环依赖的问题。

在使用Angular 6+时，我们需要注意ProvidedIn的使用。将服务的提供程序放在根模块中可以避免循环依赖的问题。当服务只在特定模块中使用时，可以将它们添加到模块的providers数组中。通过正确地使用ProvidedIn，我们可以避免循环依赖问题，提高应用程序的性能和可维护性。