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!

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

product.service.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.service 文件。 service.spec.ts.

product.service.spec.ts

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

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

product.component.spec.ts

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

我不需要将 HttpClientModule 类添加到 app.module.ts 的导入部分，我只需要将它添加到规范文件的导入部分，这就解决了我的“NullInjectorError: No”问题HttpClient 的提供者。问题。

希望对遇到同样问题的人有所帮助。

Answer 2

我认为您收到了来自app.component.spec.ts 的错误。您还必须导入必要的组件和模块进行测试，试试这个：

---

app.component.spec.ts

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