Angular 7. NullInjectorError: 没有 HttpClient 的提供者！即使 app.module 有 HttpClientModule。如何解决？

Question

我正在使用 Angular 7，并且我正在尝试使用一项服务，该服务使用 HttpClient 从我的 .Net Core MVC 应用程序中的 APIController 调用 API 链接。每当我在输入 ng test 后尝试在 cmd 窗口中进行测试时，它都会给我一个错误，它仅适用于我要修复的服务：

ProductService should be created
Error: StaticInjectorError(DynamicTestModule)[HttpClient]: 
  StaticInjectorError(Platform: core)[HttpClient]: 
    NullInjectorError: No provider for HttpClient!

以下是我在以下文件中编写代码的方式：

产品.服务.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Product } from '../product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  productsUrl = "api/ProductsAPI";

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl)
      .pipe(
        catchError(this.handleError<Product[]>('getProducts'))
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      //// TODO: better job of transforming error for user consumption
      //this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
}

product.service 文件中有 HttpClient，我读到它不起作用，除非 HttpClientModule 位于 app.module 文件的 import 部分，而 product.service 类位于 providers 部分。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ProductsComponent } from './products/products.component';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { ProductService } from './products/product.service';

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

它仍然给我一个“没有 HttpClientModule 的提供者”错误。我想使用 product.service，并将其导入到另一个组件中。

有没有人对如何解决这个问题有任何建议或答案？

Answer 1

我有办法消除 nullInjetorError 问题。我以为我必须将 HttpClientModule 类放在 Product.service 文件的 app.module.ts 文件的导入部分中，但事实证明我必须将其导入到spec文件product的导入部分中。服务规范

产品.服务.规格

describe('ProductService', () => {
  beforeEach(() => TestBed.configureTestingModule({
    declarations: [ProductsComponent],
    imports: [HttpClientModule]
  })
  );

当该问题仍然存在于product.component 中时，我将 HttpClientModule 类添加到product.component.spec.ts 文件的导入部分中，并解决了该问题。

产品.组件.规格

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

我不需要将 HttpClientModule 类添加到 app.module.ts 的导入部分，我只需将其添加到规范文件的导入部分，这解决了我的问题“NullInjectorError：没有 HttpClient 的提供程序” .' 问题。

我希望这可以帮助那些遇到同样问题的人。

Answer 2

我认为你有来自 的错误app.component.spec.ts。您还必须导入测试所需的组件和模块，请尝试以下操作：

应用程序.组件.规格.ts

...
TestBed.configureTestingModule({
  declarations: [ your_component ],
  imports: [ your_module ],
  providers: [ your_service ]
}).compileComponents();