NullInjectorError: StaticInjectorError[JobcounterComponent -> FetchJobDataService]

Question

我收到此錯誤，如下面的屏幕截圖所示。

我在這里研究了幾個類似的問題。 最常見的建議是“將您的服務添加到應用程序模塊的提供者數組中”。 當我使用 Angular 元素編寫 Web 組件時，我不會主動使用默認的應用程序組件。 但是，我已將 die Injectable 屬性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(); } }

瀏覽器控制台錯誤消息

Answer 1

在 app.module 中導入HttpClientModule

像這樣：

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

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

  ]
})