asp.net-mvc - NullInjectorError : No provider for HttpClient! Angular 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 {
}

我，不知道我在哪里，做错了。因为我，是 Angular 新手。我试图在 @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 { }