ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError

Question

I have an error message:

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

Error in the console

the indice.service.ts file is presented like this:

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 file

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

I also have a strange message for the Router:

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

Error Visual Studio Code

indice.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 { }

I don't know where these problems come from? Thank you for your help.

Answer 1

Be sure to import HttpClientModule in app.module.ts

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

Answer 2

@Injectable({
    providedIn: "root"
})
export class IndiceService {

Answer 3

The issue you are getting is because Angular doesn't know about the IndiceService yet.

You either have to define it at the root level:

@Injectable({
  providedIn:'root'
})

export class IndiceService {...}

Or in your IndiceModule inside providers array:

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

export class IndiceModule { }

The difference between the 2 is with 'root' level service, its single instance will be created & shared throughout the application. While adding it in the providers array, its instance will be shared within this module only.

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

This error is generated by the Typescript compiler because you have injected Router in your IndiceComponent, but it is not used. So, it warns you to remove it if it is not used.