NullInjectorError：没有HttpClient的提供者！ Angular 5

Question

我正在使用Visual Studio 2017中的Angular模板。然后我更新到了角度5.2。我，试图找到解决方案。但没有得到确切的解决方案。

服务类正在调用http调用。但是，我收到错误

Service.TS

Thread(Runnable{ 
 hmImageBase64[1] = CommonUtils.bitmapToString(resized2)
}) 

这是我的Component类

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

}

app.shared.module.ts

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

我，不知道我在哪里，我做错了。因为我，我是角色的新人。我试图在@NgModule下添加HttpClient但是给出了一些其他错误。因为根据我的知识，我不需要添加app.shared.module.ts文件。由于HttpClient用于服务和组件级别。

任何人都可以告诉我我在哪里，做错了。

Answer 1

HttpClient需要在模块的导入中导入和添加模块HttpClientModule而不是HttpModule。

有关详情，请参阅Documentation

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

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

Answer 2

npm clear cache 
npm update 
rm -rf /node_modules
npm i --save 

然后将同一模块导入应用程序根模块。 希望它对您有用。