NullInjectorError: No provider for HttpClient! Angular 5

Question

I, am using the Angular template in visual studio 2017. Then I updated to angular 5.2. I, tried to find the solution. But didn't got exact solution.

The service class is calling the http call.However I, am getting an error as

Service.TS

import { Injectable } from '@angular/core';
import { LoginViewModel as loginVM } from "../../viewmodel/app.viewmodel"
import { HttpClient, HttpHeaders } from "@angular/common/http";

@Injectable()
export class LoginService {
    private loginUrl = "Account/Authentication";
    private _httpClientModule: HttpClient;
    constructor(httpClientModule: HttpClient) {
        this._httpClientModule = httpClientModule;
    }

    public LoginHttpCall(_loginVM: loginVM) {

        const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');

        this._httpClientModule.post(this.loginUrl, _loginVM, { headers }).
            subscribe(data => {
                console.log(data);
            },
            err => {
                console.log("Error occured.");
            });
    }

}

Here is my Component class

import { Component } from '@angular/core';
import { AppComponent } from "../app/app.component";
import { LoginService } from "../../service/account/app.service.account.login";
import { LoginViewModel } from "../../viewmodel/app.viewmodel";
declare var componentHandler: any;
@Component({
    selector: 'login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css'],
    providers: [LoginViewModel, LoginService]
})
export class LoginComponent {
    private _appComponent: AppComponent;
    private _loginService: LoginService;
    constructor(private appComponent: AppComponent, loginService: LoginService) {
        this._appComponent = appComponent;
        this._appComponent.menulist = false;
        this._loginService = loginService;
    }
}

app.shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './components/app/app.component';
import { HomeComponent } from './components/home/home.component';
import { LoginComponent } from './components/login/login.component';
import { MobileComponent } from './components/mobile/mobile.component';

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        MobileComponent
    ],
    imports: [
        CommonModule,
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            { path: '', redirectTo: 'home', pathMatch: 'full' },
            { path: 'home', component: HomeComponent },
            { path: 'login', component: LoginComponent },
            { path: 'mobile', component: MobileComponent },
            { path: '**', redirectTo: 'home' }
        ])
    ]
})
export class AppModuleShared {
}

I, don't know where I, am doing mistake. Since I , am new in angular. I tried to add HttpClient under @NgModule but gives some other error . Since As per my knowledge I don't need to add in app.shared.module.ts file. Since HttpClient is used in service and component level.

Can anyone please tell me where I, am doing wrong .

Answer 1

HttpClient needs for the module HttpClientModule instead of HttpModule to be imported and added in the imports of the module.

For more see Documentation

import { HttpClientModule } from '@angular/common/http';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        HttpClientModule,
        ...
    ]
})
export class AppModuleShared { }