javascript - NullInjectorError : StaticInjectorError[JobcounterComponent -> FetchJobDataService]

Question

我收到此错误，如下面的屏幕截图所示。

我在这里研究了几个类似的问题。最常见的建议是“将您的服务添加到您的应用模块的提供程序数组”。当我使用 Angular 元素编写 Web 组件时，我不会主动使用默认的应用程序组件。但是，我添加了可注入(inject)属性 providedIn: root到服务装饰器。 IMO，这应该相当于将服务添加到 app 模块的 providers 数组。

对如何解决此问题没有任何想法。

最好的，Dropbear。

我的 fetch-job-data.service.ts 文件:

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 文件:

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();
  }

}

Browser Console error message

Answer 1

进口 HttpClientModule在 app.module 中

像这样:

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

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

  ]
})