没有HttpClient的提供者

小开

你没有在你的模块中提供提供商:

<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添加到测试床配置中:

// 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', () => {
});
});

小开

为了解决这个问题，Angular使用了HttpClient来通过HTTP与远程服务器通信。

为了让HttpClient在应用程序中无处不在，

打开根AppModule，
从@angular/common/http导入HttpClientModule，

# EYZ0
添加到@NgModule.imports数组。

# EYZ0

小开

你会得到HttpClient的错误，你会错过HttpClientModule。

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

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

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

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

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

小开

在app.module.ts的import和providers中添加HttpModule和HttpClientModule解决了这个问题。进口 ->

import {HttpModule} from "@angular/http";

. import {HttpClientModule} from "@angular/common/http"

小开

在将使用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做任何事情，只需要做循环依赖。如果您的问题仍然存在，我建议解决区分大小写的命名警告。

小开

在angular github页面中，这个问题被讨论并找到解决方案。 # EYZ0 < / p >

小开

我也有类似的问题。对我来说，修复是在HttpClient Module之前导入HttpModule:

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

小开

我发现了更棘手的问题。请在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 { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

在同一个文件(app.module.ts)中，在我的@NgModule imports[]数组中，我这样写，

HttpModule,
HttpClientModule

小开

我也有同样的问题。经过浏览和挣扎的问题发现以下解决方案

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


imports: [
HttpModule,
HttpClientModule
]

在app.module.ts中导入HttpModule和HttpClientModule，并像上面提到的那样添加到导入中。

小开

只需要导入HttpModule和HttpClientModule:

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

不需要HttpClient。

小开

我也面临着类似的问题，做下面的改变，它为我工作

在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]
}));

小开

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

首先，检查一下。

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

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

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

  imports: [
HttpClientModule,....
],

现在你应该没事了!

小开

在我的例子中，错误发生在使用npm包中angular模块的服务时，该服务需要注入HttpClient。当安装npm包时，由于NPM的版本冲突处理 (engi-sdk-client是包含服务的模块)，在包目录中创建了一个重复的node_modules目录:

显然，对HttpClient的依赖关系没有正确地解决，因为注入到服务中的HttpClientModule(位于重复的node_modules目录中)和注入到app.module中的node_modules(正确的node_modules)的位置不匹配。

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

这个有缺陷的设置还会导致上述运行时异常No provider for HttpClient!。

< p > TL,博士;检查重复的node_modules目录，如果没有其他解决方案也管用!< / p >

小开

在我的案例中，我发现一旦我重新构建应用程序，它就工作了。

我已经导入了在以前的文章中指定的HttpClientModule，但我仍然得到错误。我停止服务器，重建应用程序(ng serve)，它工作。

小开

在我的例子中，我在子模块中使用服务(不是根AppModule)，并且HttpClientModule只在模块中导入。

所以我必须修改服务的默认作用域，通过在@Injectable装饰器中将“providedIn”更改为“any”。

默认情况下，如果你使用angular-cli来生成服务，'providedIn'被设置为'root'。

希望这能有所帮助。

小开

转到app.module.ts

进口# EYZ0

和

在导入下添加HttpClientModule

应该是这样的

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

小开

修复了在imports节中添加HttpClientModule提供者的问题

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


@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
]
})

我们需要在src -> app -> app.module.ts文件中添加这个。

小开

只需在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) {}

小开

在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,
...

小开

这个问题更多的是由于没有在根模块中注册所需的服务，即HttpClientModule。# EYZ1。

你错过了HttpClientModule，因为你收到了HttpClient的错误

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

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

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

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

希望它能起作用。

小开

步骤1:导入app.module.ts中的HttpClientModule

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

步骤2:在模块导入中添加HttpClientModule:

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

小开

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

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

因为当自动补全发生时我没有注意到，

我必须假设其他一些人也遇到了类似的问题，并不是说他们没有在他们的应用模块中导入HttpClientModule。

小开

添加

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

到my-app的根模块解决了这个问题

小开

转到app.module.ts文件。
从“@angular/common/http”导入HttpClientModule文件，例如:从“@angular/common/http”导入{HttpClientModule};
在imports中添加HttpClientModule:[]

没有HttpClient的提供者

当前的行为

`环境`

在测试中使用HttpClient