我用CLI启动了一个新的angular项目,遇到了一个HttpClient次无提供者的错误.

我在模块导入中添加了HttpClientModule个模块,这似乎是此场景中常见的罪魁祸首.没有在网上找到很多其他的,所以我不确定问题可能是什么.

我的app.module e.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

我的tsconfig

{
  "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();
  }));

如有任何帮助,我们将不胜感激!

推荐答案

在你的测试中

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

应该是这样的

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

或者更好(如果您想模拟请求):

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

Angular相关问答推荐

更改物料设计中的复选框勾选 colored颜色

NG-BOOTSTRAPP SCROLLESPY没有高度就不能工作?

如何使用独立组件在ANGLE(16+)中实现嵌套布线

元素上的Angular 管道链接不起作用

找不到模块webpack dev服务器

Angular-每2个流式传输多个HTTP调用

Angular 迁移 14 到 15 / 16:angular universal 是否停止将 <!-- this page was prerendered with angular universal --> 用于预渲染页面?

如何在 Angular 库中将依赖项声明为可选?

根据最后发出的 observable 创建一个 observable

http 调用的 RxJs 数组

包含与 ngFor 相关内容的 HTML 输入

将数组传递给 URLSearchParams,同时使用 http 调用获取请求

Angular 5 国际化

Angular 5 Mat-grid 列表响应式

如何在 Angular 6 中使用 mouseover 和 mouseout

Angular 2 - 组件内的 formControlName

如何在 Angular 2 中创建可重用的动画

如何每隔一段时间发出 HTTP 请求?

ng add 与 npm install 在 Angular 6 中的区别

Angular 5 和material - 如何从 SnackBar 组件更改背景 colored颜色