CODEWITHSUNDEEP
angular
MarinaLaGrande
MarinaLaGrande

Reputation: 183

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

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.

Upvotes: 15

Views: 87701

Answers (5)

Ashrik Ahamed
Ashrik Ahamed

Reputation: 455

If you have created a class just by right-click or copy pasted from somewhere, you need to add @Injectable over the class like this:

@Injectable({
  providedIn: 'root'
})

export class IndiceService{
}

Upvotes: 4

Юрий Горогоцький
Юрий Горогоцький

Reputation: 31

Add providers to your componrnent:

@Component({
 selector: 'app-indice',
 templateUrl: './indice.component.html',
 styleUrls: ['./indice.component.css'],
 providers: [IndiceService]
})

Upvotes: 3

Greg SP
Greg SP

Reputation: 276

Be sure to import HttpClientModule in app.module.ts

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

Upvotes: 26

Pankaj Sati
Pankaj Sati

Reputation: 2529

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.

Upvotes: 11

zainhassan
zainhassan

Reputation: 1780

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

Upvotes: 2

Related Questions