Angular 9: Cannot instantiate cyclic dependency

Question

I am reusing a service for HTTP communication which worked fine under Angular 8, but throws the following error 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)

This is the code of the HTTP service:

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

This is one of the components using HTTP service:

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

This is my 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 { }

The components are referred within the app.component.html using the [routerLink] directive and app-routing.module.ts

Thanks in advance!

Answer 1

I prefer declaring the HTTP Services as: @Injectable({ providedIn: 'root', }) and not providing them in any module.

That way the Service is accessible on the whole app from the beginning and probably you won't have error like this.

It would be better If you include your apps modules in the question.