Angular 9: Cannot instantiate cyclic dependency - html

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.

Answer 2

If you have more than one modules:
The problem could be, that the HttpService is provided in more than one of your modules.
In that case:
Solution can be to create a new module: HttpServiceModule:
#NgModule({
providers: [ HttpService ]
})
export class HttpServiceModule {}
After that, you have to delete in all other modules: providers: [ ...HttpService... ]