Angular 使用HTTPClient添加服务后测试失败

我陷入了这个问题，当我将我的后端服务添加到我的仪表板组件的构造函数时，我在测试中出错：

错误：StaticInjectorError（DynamicTestModule）[后端服务-> HttpClient]： StaticInjectorError（平台：核心）[后端服务-> HttpClient]：

NullInjectorError:HttpClient没有提供程序

我有backend.service.ts其中我有：

  1 import { Injectable } from '@angular/core';
  2 import { HttpClient } from '@angular/common/http';
  3 import { Observable } from 'rxjs';
  4 import { environment } from '../environments/environment';
  5 
  6 @Injectable({
  7   providedIn: 'root'
  8 })  
  9 export class BackendService {
 10 
 11   constructor(private http: HttpClient) { }
 12 
 13   getUsers() : Observable<any> {
 14     return this.http.get<any>(`${environment.api}/api/users`);
 15   }   
 16 
 17 }

我的仪表板组件

  1 import { Component, OnInit } from '@angular/core';
  2 import { BackendService } from '../backend.service';
  3 
  4 @Component({
  5   selector: 'app-dashboard',
  6   templateUrl: './dashboard.component.html',
  7   styleUrls: ['./dashboard.component.css']
  8 })  
  9 export class DashboardComponent implements OnInit {
 10       
 11   constructor(private backend : BackendService) { } // This makes the  error
 12   
 13   ngOnInit() {
 14   }
 15     
 16 } 

仪表板.component.spec.ts

  1 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 import { DashboardComponent } from './dashboard.component';
  3 
  4 describe('DashboardComponent', () => {
  5   let component: DashboardComponent;
  6   let fixture: ComponentFixture<DashboardComponent>;
  7 
  8   beforeEach(async(() => {
  9     TestBed.configureTestingModule({
 10       declarations: [ DashboardComponent ]
 11     })
 12     .compileComponents();
 13   }));
 14 
 15   beforeEach(() => {
 16     fixture = TestBed.createComponent(DashboardComponent);
 17     component = fixture.componentInstance;
 18     fixture.detectChanges();
 19   });
 20 
 21   it('should create', () => {
 22     expect(component).toBeTruthy();
 23   });
 24 });

    1 import { BrowserModule } from '@angular/platform-browser';
    2 import { NgModule } from '@angular/core';
    3 import { HttpClientModule, HttpClient } from '@angular/common/http';
    4 
    5 import { AppRoutingModule, routingComponents } from './app-routing.module';
    6 import { AppComponent } from './app.component';
    7 
    8 @NgModule({
    9   declarations: [
   10     AppComponent,
   11     routingComponents
   12   ],
   13   imports: [
   14     BrowserModule,
   15     HttpClientModule,
   16     AppRoutingModule
   17   ],
   18   providers: [],
   19   bootstrap: [AppComponent]
   20 })
   21 export class AppModule { }
                                      

这就是dashboard.component.spec.ts最终的外观

import { BackendService } from './../backend.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';

import { DashboardComponent } from './dashboard.component';

describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent ],
      providers: [BackendService],
      imports: [HttpClientModule, HttpClientTestingModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

从'/../backend.service'导入{BackendService}；
从“@angular/core/testing”导入{async，ComponentFixture，TestBed}；
从'@angular/common/http'导入{HttpClientModule}；
从'@angular/common/http/testing'导入{HttpClientTestingModule}；
从“./dashboard.component”导入{DashboardComponent}；
描述（'DashboardComponent'，（）=>{
let组件：仪表板组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[仪表板组件]，
提供者：[后端服务]，
导入：[HttpClientModule，HttpClientTestingModule]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（仪表板组件）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

由于组件依赖于服务，而服务又依赖于

HttpClient

，因此需要导入可用的

HttpClient

测试模块。然后，您需要将这些内容添加到

测试床.configureTestingModule

调用中的

提供者

和

导入

数组中。这使得所有的

HttpClient

内容都可用于您需要的服务

我只是编码了这个，测试了它，测试成功了

如果组件依赖于使用

HttpClient

的服务，则此模式将适用于任何组件规范，这就是您的dashboard.component.spec.ts最终的外观

import { BackendService } from './../backend.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientTestingModule } from '@angular/common/http/testing';

import { DashboardComponent } from './dashboard.component';

describe('DashboardComponent', () => {
  let component: DashboardComponent;
  let fixture: ComponentFixture<DashboardComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ DashboardComponent ],
      providers: [BackendService],
      imports: [HttpClientModule, HttpClientTestingModule]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(DashboardComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

从'/../backend.service'导入{BackendService}；
从“@angular/core/testing”导入{async，ComponentFixture，TestBed}；
从'@angular/common/http'导入{HttpClientModule}；
从'@angular/common/http/testing'导入{HttpClientTestingModule}；
从“./dashboard.component”导入{DashboardComponent}；
描述（'DashboardComponent'，（）=>{
let组件：仪表板组件；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[仪表板组件]，
提供者：[后端服务]，
导入：[HttpClientModule，HttpClientTestingModule]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（仪表板组件）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
});

由于组件依赖于服务，而服务又依赖于

HttpClient

，因此需要导入可用的

HttpClient

测试模块。然后，您需要将这些内容添加到

测试床.configureTestingModule

调用中的

提供者

和

导入

数组中。这使得所有的

HttpClient

内容都可用于您需要的服务

我只是编码了这个，测试了它，测试成功了

---

同样的模式也适用于组件依赖于使用

HttpClient

的服务的任何组件规范。这可能会有所帮助：在我将其更改为现在的版本之前，我已经遵循了前面的教程。我仍然有这个错误。这可能会有所帮助：在我把它改成现在的样子之前，我已经遵循了之前的教程。我仍然有这个错误。这是完美的。我还为我的app-routing.module.ts添加了必要的导入，我不明白为什么我还需要在那里包含它，因为我没有在我的app-routing.module.ts上使用它组件模板是否使用任何

routerLIink

s？这是我唯一能猜到你为什么需要进口的东西，我猜到了。我想就是这样。非常感谢。这个很好用。我还为我的app-routing.module.ts添加了必要的导入，我不明白为什么我还需要在那里包含它，因为我没有在我的app-routing.module.ts上使用它组件模板是否使用任何

routerLIink

s？这是我唯一能猜到你为什么需要进口的东西，我猜到了。我想就是这样。非常感谢你。