没有 HttpClient 的提供者

为了解决这个问题，HttpClient 是 Angular 通过 HTTP 与远程服务器通信的机制。

要使 HttpClient 在应用中随处可用，

打开根 AppModule，从 @angular/common/http 导入 HttpClientModule，从 '@angular/common/http' 导入 { HttpClientModule }；将其添加到 @NgModule.imports 数组。进口：[HttpClientModule，]

您尚未在模块中提供提供程序：

<strike>import { HttpModule } from '@angular/http';</strike>
import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [ HttpClientModule, ... ]
  // ...
})
export class MyModule { /* ... */ }

在测试中使用 HttpClient

运行 ng test 并收到“No provider for HttpClient”错误时，您需要将 HttpClientTestingModule 添加到 TestBed 配置：

// Http testing module and mocking controller
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';

// Other imports
import { TestBed } from '@angular/core/testing';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';

describe('HttpClient testing', () => {
  let httpClient: HttpClient;
  let httpTestingController: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ HttpClientTestingModule ]
    });

    // Inject the http service and test controller for each test
    httpClient = TestBed.get(HttpClient);
    httpTestingController = TestBed.get(HttpTestingController);
  });

  it('works', () => {
  });
});

您收到 HttpClient 错误，因此您缺少 HttpClientModule 。

你应该像这样在 app.module.ts 文件中导入它 -

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

并像这样在 NgModule 装饰器中提及它 -

@NgModule({
...
imports:[ HttpClientModule ]
...
})

如果这甚至不起作用，请尝试清除浏览器的 cookie 并尝试重新启动服务器。希望它可以工作，我遇到了同样的错误。

只需在 app.module.ts 文件的“导入”数组中添加 HttpClientModule。

...
import {HttpClientModule} from '@angular/common/http'; // add this line
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule, //add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

然后您可以通过构造函数注入在您的项目中使用 HttpClient

  import {HttpClient} from '@angular/common/http';
  
  export class Services{
  constructor(private http: HttpClient) {}

我有同样的问题。浏览并解决问题后找到以下解决方案

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

imports: [
  HttpModule,
  HttpClientModule
]

在 app.module.ts 中导入 HttpModule 和 HttpClientModule 并添加到上述导入中。

通过进行以下更改，我也遇到了类似的问题，它对我有用

在 app.modules.ts

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

并在相应的服务等级

import { HttpClient } from '@angular/common/http'

构造函数应如下所示

constructor(private http: HttpClient, private xyz: xyzService) {}

在测试文件中

import { HttpClientTestingModule } from '@angular/common/http/testing'

  beforeEach(() => TestBed.configureTestingModule({
    imports: [HttpClientTestingModule]
  }));

第 1 步：在 app.module.ts 中导入 HttpClientModule：

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

第 2 步：在模块导入中添加 HttpClientModule：

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    HttpClientModule
  ],
  providers: [
    ....
  ],
  bootstrap: [AppComponent]
})

前往app.module.ts

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

和

在导入下添加 HttpClientModule

应该是这样的

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,HttpClientModule]

我遇到了同样的问题，有趣的是我同时打开了两个项目，我更改了错误的 app.modules.ts 文件。

首先，检查一下。

更改后将以下代码添加到 app.module.ts 文件中

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

之后将以下内容添加到 app.module.ts 文件中的 imports 数组中

  imports: [
    HttpClientModule,....
  ],

现在你应该没事了！

您收到 HttpClient 的错误，因此您缺少 HttpClientModule。

您应该像这样在 app.module.ts 文件中导入它 -

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

并像这样在 NgModule 装饰器中提及它 -

@NgModule({
...
imports:[ HttpClientModule ]
...
})

希望它可以工作。请参阅下图以获得更多想法。

https://i.stack.imgur.com/bsN3Z.png

我遇到了同样的问题，然后在我的 app.module.ts 中我以这种方式更新了文件，

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

在我的@NgModule imports[]array 中的同一个文件（app.module.ts）中，我这样写，

HttpModule,
HttpClientModule

将使用 HTTPClient 的服务注入类后出现此错误。该类再次在服务中使用，因此它创建了循环依赖项。我可以编译带有警告的应用程序，但在浏览器控制台中发生了错误

“没有 HttpClient 的提供者！（MyService -> HttpClient）”

它破坏了应用程序。

这有效：

import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { MyClass } from "../classes/my.class";

@Injectable()
export class MyService {
  constructor(
    private http: HttpClient
  ){
    // do something with myClass Instances
  }      
}
.
.
.
export class MenuItem {
  constructor(

  ){}
}

这会破坏应用程序

import { HttpClient, HttpClientModule, HttpHeaders } from '@angular/common/http';
import { MyClass } from "../classes/my.class";

@Injectable()
export class MyService {
  constructor(
    private http: HttpClient
  ){
    // do something with myClass Instances
  }      
}
.
.
.
import { MyService } from '../services/my.service';
export class MyClass {
  constructor(
    let injector = ReflectiveInjector.resolveAndCreate([MyService]);
    this.myService = injector.get(MyService);
  ){}
}

在 MyClass 中注入 MyService 后，我收到了循环依赖警告。 CLI 仍然编译时出现此警告，但该应用程序不再工作，并且在浏览器控制台中给出了错误。所以在我的情况下，它不必对@NgModule 做任何事情，而是使用循环依赖。如果您的问题仍然存在，我建议解决区分大小写的命名警告。

我发现了更棘手的问题。请在您的 app.module.ts 文件中导入 HttpClientModule，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
],

imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 app.module.ts -> import 部分下，您需要添加 HttpClientModule。下面是示例

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


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpClientModule,  // This is where you need to add
        FormsModule,
    ...

在 app.module.ts 的导入和提供程序中添加 HttpModule 和 HttpClientModule 解决了这个问题。 进口 -> import {HttpModule} from "@angular/http"; import {HttpClientModule} from "@angular/common/http";

我有类似的问题。对我来说，解决方法是在 HttpClient 模块之前导入 HttpModule：

import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
.
.
.
imports: [
  BrowserModule,
  HttpModule,
  HttpClientModule
],

只需导入 HttpModule 和 HttpClientModule：

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

不需要 HttpClient。

在 Angular github 页面中，讨论了这个问题并找到了解决方案。 https://github.com/angular/angular/issues/20355

在 import 部分的 app.module.ts 文件中添加 HttpClientModule 解决了我的问题。

就我而言，我在子模块（不是根 AppModule）中使用服务，并且 HttpClientModule 仅在模块中导入。

所以我必须通过在@Injectable 装饰器中将'providedIn'更改为'any'来修改服务的默认范围。

默认情况下，如果您使用 angular-cli 生成服务，则“providedIn”设置为“root”。

希望这可以帮助。

在我的情况下，我发现一旦我重建了它工作的应用程序。

我已按照之前帖子中的说明导入了 HttpClientModule，但仍然出现错误。我停止了服务器，重新构建了应用程序 (ng serve)，它工作了。

就我而言，当使用位于 npm 包中的 Angular 模块中的服务时发生错误，该服务需要注入 HttpClient。安装 npm 包时，由于 version conflict handling of npm（engi-sdk-client 是包含服务的模块），在包目录中创建了一个重复的 node_modules 目录：

https://i.stack.imgur.com/DSZ82.png

显然，对 HttpClient 的依赖没有正确解析，因为注入服务的 HttpClientModule 的位置（位于重复的 node_modules 目录中）和注入 app.module 的位置（正确的 node_modules）不不匹配。

由于错误的 npm install 调用，我在包含重复 node_modules 目录的其他设置中也遇到了此错误。

这种有缺陷的设置也会导致所描述的运行时异常 No provider for HttpClient!。

TL;博士;如果其他解决方案都不起作用，请检查重复的 node_modules 目录！

我的特殊问题是，当我在我的应用程序模块中正确包含 HttpClientModule 时，我在其中注入 HttpClient 时导入了“错误”的 HttpClient，特别是来自 signalr 包的 HttpClient。

import { HttpClient } from '@aspnet/signalr';

因为当自动完成发生时我没有注意，

https://i.stack.imgur.com/zKQdF.png

我不得不假设其他一些人也遇到了类似的问题，而不是他们只是没有在他们的应用程序模块中导入 HttpClientModule。