Angular 5报错NullInjectorError: No provider for HttpClient!求解决

嘿，我帮你捋捋这个问题——你遇到的这个错误其实是Angular依赖注入系统的典型报错，核心原因就是你没有在模块中导入并注册HttpClientModule。毕竟从Angular 4.3开始，HttpClient取代了旧的Http服务，它必须通过HttpClientModule来启用，不然DI系统找不到它的提供者。

下面是一步步的修复方案：

1. 先在AppModule中导入HttpClientModule #

打开你的app.module.ts文件，先添加导入语句：

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

接着在@NgModule的imports数组里把HttpClientModule加进去，就像这样：

@NgModule({
  declarations: [
    // 这里是你的组件、指令、管道
  ],
  imports: [
    BrowserModule,
    HttpClientModule, // 一定要把这个加在这里！
    // 其他你用到的模块，比如RouterModule之类的
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 优化你的服务注入方式 #

看了你的服务代码，其实不用手动把HttpClient赋值给私有变量，Angular的DI可以直接在构造函数里把它声明为私有属性，代码更简洁：

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

  // 直接在这里声明私有属性，Angular会自动注入
  constructor(private http: HttpClient) { }

  public LoginHttpCall(_loginVM: loginVM) {
    const headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-8');
    // 记得返回这个Observable，组件才能订阅拿到结果
    return this.http.post(this.loginUrl, _loginVM, { headers });
  }
}

3. 确保服务的提供者配置正确 #

如果你的LoginService是全局使用的，在Angular 6及以上版本，你可以直接在@Injectable里加providedIn: 'root'，这样就不用手动在模块的providers数组里注册了，还能自动成为单例：

@Injectable({
  providedIn: 'root' // 加这个就搞定全局注册
})
export class LoginService {
  // ... 你的服务代码
}

做完这些之后，重启你的Angular应用，这个错误应该就彻底消失啦～

内容的提问来源于stack exchange，提问作者San Jaisy