Angular 4 Error: No provider for HttpClient

我正在开始一个新的角度与 CLI 项目，并运行到一个没有提供者的 HttpClient错误。

我已经将 HttpClientModule添加到我的模块导入中，这似乎是这个场景中常见的罪魁祸首。除此之外，我在网上找不到其他东西，所以我不知道问题出在哪里。

我的应用程序模块

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

还有我的服务

@Injectable()
export class FlexSearchService {




constructor(private http: HttpClient) {}


getSavedSearchResult(index: string, queryName: string, query: string ): Observable<any> {
const url = `${environment.flexUrl}/${index}/search`;
const item = new SearchQuery({queryName: queryName, variables: {q: query}});
return this.http.post(url, item);
}
}

Ng 版本提供以下输出

@angular/cli: 1.4.2
node: 6.9.4
os: darwin x64
@angular/animations: 4.4.4
@angular/common: 4.4.4
@angular/compiler: 4.4.4
@angular/core: 4.4.4
@angular/forms: 4.4.4
@angular/http: 4.4.4
@angular/platform-browser: 4.4.4
@angular/platform-browser-dynamic: 4.4.4
@angular/router: 4.4.4
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.4
@angular/language-service: 4.4.4
typescript: 2.3.4

我的天啊

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2017",
"dom"
]
}
}

我的测试

import { TestBed, inject } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { FlexSearchService } from './flex-search.service';


describe('FlexSearchService', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [FlexSearchService, HttpClientModule]
});
});
it('should be created', inject([FlexSearchService], (service: FlexSearchService) => {
expect(service).toBeTruthy();
}));

非常感谢您的帮助！

103528

小开

最佳答案

在你的测试中

TestBed.configureTestingModule({
providers: [FlexSearchService, HttpClientModule]
});

应该是的

TestBed.configureTestingModule({
imports: [HttpClientModule],
providers: [FlexSearchService]
});

甚至更好(如果你想模仿请求) :

TestBed.configureTestingModule({
imports: [HttpClientTestingModule],
providers: [FlexSearchService]
});

小开

一个更简单的方法是在全局范围内提供它... ... 将以下内容导入 app.module.ts，如下所示:

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

并在进口中申报:

  imports: [
HttpModule,
HttpClientModule, ...
]

小开

导入 HttpClientTestingModule。

在你的测试中:

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

在测试的 configureTestingModule 中，执行以下操作:

TestBed.configureTestingModule({
imports: [ HttpClientTestingModule ],
})
.compileComponents();

小开

为此，您必须输入以下内容:

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

对于测试的 configureTestingModule中的 spec 文件，请执行以下操作:

TestBed.configureTestingModule({
imports: [ HttpClientTestingModule ],
})
.compileComponents();

小开

当我试图使用 npm 链接在项目中本地链接我的棱角库时，我注意到了这个问题。

从存储库下载库解决了我的问题。