CODEWITHSUNDEEP
ionic-framework
user10150075
user10150075

Reputation:

How inject service in component

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

Upvotes: 0

Views: 609

Answers (2)

Vivekanandan Sakthivelu
Vivekanandan Sakthivelu

Reputation: 81

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

Upvotes: 2

Thimo
Thimo

Reputation: 131

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

Upvotes: 0

Related Questions