html - Angular 9: Kan ikke instansiere syklisk avhengighet

Jeg gjenbruker en tjeneste for HTTP-kommunikasjon som fungerte fint under Angular 8, men som kaster følgende feil under 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)

Dette er koden for HTTP-tjenesten:

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');
    }
}

Dette er en av komponentene som bruker HTTP-tjeneste:

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 { }
}

Dette er min 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 { }

Komponentene refereres til i app.component.html ved bruk av [routerLink]-direktivet og app-routing.module.ts

Takk på forhånd!

Svar #1

Jeg foretrekker å erklære HTTP-tjenestene som: @Injectable({ providedIn: 'root', }) og ikke å tilby dem i noen modul.

På den måten er tjenesten tilgjengelig i hele appen fra starten, og sannsynligvis vil du ikke få en feil som dette.

Det ville være bedre om du inkluderer appens moduler i spørsmålet.

Svar #2

Hvis du har mer enn ett modul: Problemet kan være at HttpService er levert i mer enn ett av modulene dine.

I så fall: Løsningen kan være å lage en ny modul: HttpServiceModule:

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

Etter det må du slette i alle andre moduler: providers: [ ...HttpService... ]

Relaterte artikler