Angular 没有 HttpClient 的提供者 - TypeScript

在 Angular 中，HttpClient 是一个很有用的服务，可以用于向服务器发送 HTTP 请求。但是有时候我们可能会遇到这样的情况：当我们编写一个自定义的 provider 或 interceptor 时，需要使用 HttpClient，但是直接注入会遇到问题。

问题描述

我们在编写 provider 或 interceptor 时，会在构造函数中注入 HttpClient，如下所示：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class MyProvider {
  constructor(private http: HttpClient) {}
}

但是当我们使用这个 provider 或 interceptor 时，Angular 会抛出异常，提示找不到 HttpClient 的提供者：

Error: StaticInjectorError(AppModule)[MyProvider -> HttpClient]: 
  StaticInjectorError(Platform: core)[MyProvider -> HttpClient]: 
    NullInjectorError: No provider for HttpClient!

这是为什么呢？因为在 provider 或 interceptor 中，注入 HttpClient 时，Angular 还没有初始化 HttpClientModule，所以并没有提供 HttpClient 的提供者。因此，我们需要手动导入 HttpClientModule。

解决方案

我们可以通过以下方式手动导入 HttpClientModule：

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

@NgModule({
  imports: [
    HttpClientModule,
    // ... other imports ...
  ],
  providers: [
    MyProvider
    // ... other providers ...
  ]
})
export class AppModule { }

这样，在使用 MyProvider 时，HttpClient 依赖项就可以被注入了。

注意：如果你有多个拦截器或 provider 需要使用 HttpClient，请确保在你的应用程序 AppModule 中只导入一次 HttpClientModule。

结论

Angular 没有 HttpClient 的提供者是由于未导入 HttpClientModule，我们可以通过手动导入 HttpClientModule 的方式解决这个问题。当我们编写自定义的 provider 或 interceptor 时，需要使用 HttpClient 时，记得导入 HttpClientModule 并确保只导入一次。