错误错误：未捕获（承诺）：NullInjectorError：R3InjectorError

Question

我有一条错误消息：

ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(MarketModule)
[IndiceService -> IndiceService -> IndiceService -> IndiceService -> IndiceService]: 
NullInjectorError: No provider for IndiceService! NullInjectorError: 
R3InjectorError(MarketModule)[IndiceService -> IndiceService

控制台错误

indice.service.ts 文件如下所示：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { IndiceResponse } from './folder/indice.response';

@Injectable()

export class IndiceService {

  private readonly api: string = environment.api;

  constructor(private http: HttpClient) { }

  getIndices(): Observable<IndiceResponse> {
    return this.http.post<IndiceResponse>(this.api + `/AZEMONDL`, {
      FILTRE: {
        LASTACTIF_CODE: "1W"
      }
    });
  }

}

indice.component.ts 文件

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { Subject, takeUntil } from 'rxjs';
import { CreateDateTimePipe } from 'src/app/shared/pipes/create-date-time.pipe';
import { Indice } from './folder/indice';
import { IndiceService } from './indice.service';

@Component({
  selector: 'app-indice',
  templateUrl: './indice.component.html',
  styleUrls: ['./indice.component.css']
})
export class IndiceComponent implements OnInit, OnDestroy {
  private unsubscribe$ = new Subject<void>();

  indices: Indice[] = [];
  selectedIndex: string = '';

  indiceDatas: any;

  constructor(    
    private service: IndiceService,
    private router: Router,
    private createDateTimePipe: CreateDateTimePipe) { }

  ngOnInit(): void {
    this.getIndices();
  }

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

我还有一条奇怪的消息Router：

Property 'router' is declared but its value is never read.

Visual Studio 代码错误

索引.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { RouterModule } from '@angular/router';
import { PipesModule } from 'src/app/shared/pipes/pipes.module';



@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule,
    PipesModule,
  ]
})

export class IndiceModule { }

不知道这些问题从何而来？感谢您的帮助。

Answer 1

一定要导入HttpClientModule进去app.module.ts

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

Answer 2

你遇到的问题是因为 Angular 还不知道这一点IndiceService。

您必须在根级别定义它：

@Injectable({
  providedIn:'root'
})

export class IndiceService {...}

或者在你的IndiceModule内部providers数组中：

@NgModule({
  ...
  providers:[IndiceService]; //Add it to the import also above
})

export class IndiceModule { }

两者之间的区别在于“根”级服务，其单个实例将在整个应用程序中创建和共享。将其添加到providers数组中时，其实例将仅在该模块内共享。

声明了属性“router”，但从未读取其值。

此错误是由 Typescript 编译器生成的，因为您已经注入Router了IndiceComponent，但未使用它。因此，如果不使用它，它会警告您将其删除。