Angular 9: 无法实例化循环依赖

Question

我正在重用 HTTP 通信服务，该服务在 Angular 8 下运行良好，但在 Angular 9 下抛出以下错误：

Error: Cannot instantiate cyclic dependency! HttpService
    at throwCyclicDependencyError (core.js:8122)
    at R3Injector.hydrate (core.js:17206)
    at R3Injector.get (core.js:16960)
    at NgModuleRef$1.get (core.js:36337)
    at Object.get (core.js:33981)
    at getOrCreateInjectable (core.js:5880)
    at Module.ɵɵdirectiveInject (core.js:21115)
    at NodeInjectorFactory.DashboardComponent_Factory [as factory] (dashboard.component.ts:9)
    at getNodeInjectable (core.js:6025)
    at instantiateRootComponent (core.js:12788)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41640)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

这是 HTTP 服务的代码：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class HttpService {

    url: string = 'http://localhost:8000/';

    constructor(private httpClient: HttpClient) { }

    public getTestCall() {
        return this.httpClient.get(this.url + 'test');
    }
}

这是使用 HTTP 服务的组件之一：

import { Component, OnInit } from '@angular/core';
import { HttpService } from 'src/app/services/http.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(private http: HttpService) { }

  ngOnInit(): void { }
}

这是我的 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpService } from './services/http.service';
import { environment } from 'src/environments/environment';
import { DashboardComponent } from './views/dashboard/dashboard.component';
import { MaterialsComponent } from './views/materials/materials.component';
import { OrdersComponent } from './views/orders/orders.component';
import { CustomersComponent } from './views/customers/customers.component';
import { ModelsComponent } from './views/models/models.component';
import { ProductsComponent } from './views/products/products.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    MaterialsComponent,
    OrdersComponent,
    CustomersComponent,
    ModelsComponent,
    ProductsComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [
    HttpService,
    { provide: 'BACKEND_API_URL', useValue: environment.backendApiUrl }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用 [routerLink] 指令和 app-routing.module.ts 在 app.component.html 中引用组件

提前致谢！

Answer 1

我更喜欢将 HTTP 服务声明为： @Injectable({ providedIn: 'root', })并且不在任何模块中提供它们。

这样，该服务从一开始就可以在整个应用程序上访问，并且您可能不会遇到这样的错误。

如果您在问题中包含您的应用程序模块会更好。

Answer 2

如果您有多个模块：问题可能是，您的多个模块中提供了 HttpService。

在那种情况下：解决方案可以是创建一个新模块：HttpServiceModule：

@NgModule({
  providers: [ HttpService ]
})
export class HttpServiceModule {}

之后，您必须删除所有其他模块： providers: [...HttpService... ]