asp.net mvc - NullInjectorError: ¡No hay proveedor para HttpClient! Angular 5

Yo, estoy usando la plantilla de Angular en Visual Studio 2017. Luego actualicé a Angular 5.2. Yo, intenté encontrar la solución. Pero no obtuve la solución exacta.

La clase de servicio está llamando a la llamada http. Sin embargo, estoy obteniendo un error como

Servicio.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.");
            });
    }

}

Aquí está mi clase Component

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.compartido.modulo.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 {
}

No sé dónde estoy cometiendo un error. Dado que soy nuevo en Angular. Intenté agregar HttpClient bajo @NgModule pero da algún otro error. Según mi conocimiento, no necesito agregarlo en el archivo app.shared.module.ts. Ya que HttpClient se utiliza a nivel de servicio y componente.

¿Alguien puede decirme, por favor, dónde estoy equivocándome?

Respuesta #1

HttpClient necesita que el módulo HttpClientModule sea importado y añadido en los imports del módulo, en lugar de HttpModule.

Para más información vea Documentación

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

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