How inject service in component - ionic-framework

Question

I have a component and service, I try to inject service (ListUserService) in component.
I import the service, I request it and I get an error, when I delete the service it works well, what is the error?
import { Component, OnInit } from '#angular/core';
import {ListUserService} from './list-user.service';
#Component({
selector: 'app-list-user',
templateUrl: './list-user.component.html',
styleUrls: ['./list-user.component.scss'],
providers: [ListUserService]
})
export class ListUserComponent implements OnInit {
constructor(private listUserService: ListUserService) {
console.log(this.listUserService);
}
}
and this is the service:
import {Injectable} from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class ListUserService {
constructor(public http: HttpClient) {
this.http.get(`http://localhost:8080/user/getUsers/`)
.subscribe(response => {
console.log(response);
});
}
}
this is the error:
ERROR
Error: StaticInjectorError(AppModule)[ListUserService -> HttpClient]:
StaticInjectorError(Platform: core)[ListUserService -> HttpClient]:
NullInjectorError: No provider for HttpClient!
this is the file app.module.ts
import {HttpClient} from '#angular/common/http';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {ListUserComponent} from './list-user/list-user.component';
import {ListUserService} from './list-user/list-user.service';
#NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
HttpClient,
StatusBar,
SplashScreen,
ListUserService,
{provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
],
bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 1

You have failed to add HttpClientModule in imports of app.module.ts
import { ListUserComponent } from './list-user/list-user.component';
import { ListUserService } from './list-user/list-user.service';
import { HttpClientModule } from '#angular/common/http';
#NgModule({
declarations: [AppComponent, ListUserComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule],
providers: [
StatusBar,
SplashScreen,
ListUserService,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}

Answer 2

Add your Service to the providers: [ListUserService] in your app.module.ts
https://angular.io/guide/ngmodules
EDIT: HttpClient must be added to providers: [ListUserService, HttpClient] aswell as import {HttpClient} from '#angular/common/http';