Angular 4 错误：没有 HttpClient 的提供者

Posted 2023-03-13

【中文标题】Angular 4 错误：没有 HttpClient 的提供者

【英文标题】：Angular 4 Error: No provider for HttpClient

【发布时间】：2018-03-16 02:46:08

【问题描述】：

我正在使用 CLI 开始一个新的 Angular 项目，并且遇到了 HttpClient 错误的 no provider。

我已将HttpClientModule 添加到我的模块导入中，这似乎是这种情况下的常见罪魁祸首。除此之外在网上找不到很多，所以我不确定问题可能是什么。

我的 app.module.ts

@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();
  ));

非常感谢任何帮助！

【问题讨论】：

你能发布确切的错误信息吗？

您在哪里提供 FlexSearchService？

the error is being thrown with my tests. 你为什么不在你的问题中说出来？？？你应该将HttpClientModule导入你的TestBed.configureTestingModule

您在providers 中提供了模块，而不是在imports 中。

对我来说，忘记在我的service.spec.ts 中导入HttpClientModule。

【参考方案1】：

在你的测试中

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

应该是

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

甚至更好（如果你想模拟请求）：

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

【参考方案2】：

导入 HttpClientTestingModule。

在你的测试中：

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

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

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

【讨论】：

是的，imports: [HttpClientTestingModule] 这行很关键。

这应该是一个可以接受的答案

【参考方案3】：

一种更简单的方法是全局提供它......像这样将以下内容导入 app.module.ts：

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

并在导入中声明它：

  imports: [
    HttpModule,
    HttpClientModule, ...
]

【参考方案4】：

为此，您必须导入以下内容：

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

对于测试的configureTestingModule 中的规范文件，请执行以下操作：

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

【参考方案5】：

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

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