NullInjectorError: StaticInjectorError [JobcounterComponent -> FetchJobDataService]

Question

Я получаю эту ошибку, как показано на скриншоте ниже.

Я изучил несколько похожих вопросов здесь. Наиболее распространенным предложением является «Добавить службу в массив поставщиков вашего модуля приложения». Поскольку я пишу веб-компоненты с элементами Angular, я не активно использую компонент приложения по умолчанию. Однако я добавил d ie Injectable свойство providedIn: root к декоратору сервисов. ИМО, это должно быть эквивалентно добавлению сервиса в массив провайдеров модуля приложения.

У вас нет идей, как это исправить.

Best, Dropbear.

Моя выборка -job-data.service.ts file:

import { Injectable } from '@angular/core';
import {HttpClient, HttpClientModule} from '@angular/common/http';
import {count} from 'rxjs/operators';
import {Observable} from 'rxjs';

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

  constructor(private _http: HttpClient) { }

  getJobCount(jobCountUrl: string): Observable<{'count': number}> {

    return this._http.get<{'count': number}>(jobCountUrl);

  }

}

Мой jobcounter.component. js file:

import {Component, OnDestroy, OnInit} from '@angular/core';
import {FetchJobDataService} from '../../services/fetch-job-data.service';
import {takeUntil} from 'rxjs/operators';
import {Subject} from 'rxjs';

@Component({
  templateUrl: './jobcounter.component.html',
  styleUrls: ['./jobcounter.component.scss']
})
export class JobcounterComponent implements OnInit, OnDestroy {

  public jobCount: {'count': number};
  public jobDataUrl = 'assets/data/jobCount.json';

  private complete$ = new Subject<void>();

  constructor(private _fetchDataService: FetchJobDataService) {
    console.log('Job counter initialized...');
  }

  ngOnInit() {

   this._fetchDataService.getJobCount(this.jobDataUrl)
        .pipe(
          takeUntil(this.complete$)
        )
        .subscribe(
          (jobCount) => {
            this.jobCount = jobCount;
            console.log('Job count: ' + jobCount);
          }
        );

  }

  ngOnDestroy() {
    this.complete$.next();
    this.complete$.complete();
  }

}

Сообщение об ошибке консоли браузера

Answer 1

Импорт HttpClientModule в app.module

Как это:

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    ...    
    HttpClientModule,
  ],
  declarations: [

  ]
})