NullInjectorError: 沒有 HttpClient 的提供者！ 角 5

Question

我，在 Visual Studio 2017 中使用 Angular 模板。然后我更新到 angular 5.2。 我，試圖找到解決方案。 但沒有得到確切的解決方案。

服務類正在調用 http 調用。但是我收到一個錯誤

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

}

這是我的組件類

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

我，不知道我在哪里，做錯了。 因為我，是新的角度。 我試圖在 @NgModule 下添加 HttpClient 但給出了一些其他錯誤。 因為據我所知，我不需要添加 app.shared.module.ts 文件。 由於 HttpClient 用於服務和組件級別。

誰能告訴我我哪里做錯了。

Answer 1

HttpClient需要模塊HttpClientModule而不是HttpModule被導入並添加到模塊的導入中。

有關更多信息，請參閱文檔

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 

然后將相同的模塊導入應用程序根模塊。 希望它對你有用。