Блог

Я использую Angular 7 и пытаюсь использовать службу, которая использует HttpClient для вызова ссылки API из моего ApiController в моем приложении .Net Core MVC. Всякий раз, когда я пытался протестировать в окне cmd после ввода ng test, он выдает ошибку, и это только для службы, которую я пытаюсь исправить:

 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, а класс 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 и импортировать его в другой компонент.

У кого-нибудь есть какие-либо предложения или ответы о том, как устранить эту проблему?

У меня есть способ устранить проблему с ошибкой nullInjetorError. Я думал, что мне нужно поместить класс HttpClientModule в раздел импорта файла app.module.ts для файла product.service, но оказывается, что я должен импортировать его в раздел импорта файла спецификации product.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: нет поставщика для HttpClient.’ проблема.

Я надеюсь, что это может помочь тем, кто сталкивается с той же проблемой.

Я думаю, что у вас ошибка app.component.spec.ts . Вы также должны импортировать необходимые компоненты и модули для тестирования, попробуйте это:

app.component.spec.ts

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