Angular 7. NullInjectorError: Нет поставщика для HttpClient! Даже когда app.module имеет HttpClientModule. Как это исправить? - PullRequest
Новая
       19

Angular 7. NullInjectorError: Нет поставщика для HttpClient! Даже когда app.module имеет HttpClientModule. Как это исправить?

1 голос
/ 12 апреля 2019

Я использую 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 - в разделе провайдеров.

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

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

Ответы [ 2 ]

0 голосов
/ 13 апреля 2019

У меня есть способ удалить проблему nullInjetorError.Я думал, что я должен поместить класс HttpClientModule в раздел импорта файла app.module.ts для файла product.service, но оказывается, что мне нужно импортировать его в раздел импорта файла spec, product.service.spec.ts.

product.service.spec.ts 

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

И когда эта проблема все еще сохраняется в компоненте product.component, я добавил HttpClientModuleКласс в раздел импорта файла product.component.spec.ts, м, и это решило проблему.

product.component.spec.ts 

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

Мне не нужно было добавлять класс HttpClientModule в раздел импорта app.module.ts, мне просто нужно было добавить его в раздел импорта спецификационных файлов, и это решило мою проблему с 'NullInjectorError: Нет поставщика для HttpClient«.проблема.

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

0 голосов
/ 12 апреля 2019

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

app.component.spec.ts 

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