Как залить сервис в компонент

Question

У меня есть компонент и служба, я пытаюсь внедрить службу (ListUserService) в компонент.Я импортирую службу, запрашиваю ее и получаю сообщение об ошибке. Когда я удаляю службу, она работает нормально. В чем ошибка?

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

, и это служба:

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

это ошибка: ОШИБКА

Ошибка: StaticInjectorError (AppModule) [ListUserService -> HttpClient]: StaticInjectorError (Платформа: ядро) [ListUserService -> HttpClient]: NullIn: Нет поставщика для HttpClient!

Это файл 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

Вы не смогли добавить HttpClientModule при импорте 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

Добавьте ваш сервис к providers: [ListUserService] в вашем app.module.ts

https://angular.io/guide/ngmodules

РЕДАКТИРОВАТЬ: HttpClient должен быть добавлен к providers: [ListUserService, HttpClient], а также import {HttpClient} from '@angular/common/http';