angular - ERROR NullInjectorError: No provider for

Question

I'm trying to list all the categories from my asp .net application, and im receiving this nullinjector error:

ERROR NullInjectorError: R3InjectorError(_AppModule)[CategoriaServiceList -> CategoriaServiceList]: 
  NullInjectorError: No provider for CategoriaServiceList!
    at NullInjector.get (core.mjs:5626:27)
    at R3Injector.get (core.mjs:6069:33)
    at R3Injector.get (core.mjs:6069:33)
    at ChainedInjector.get (core.mjs:15378:36)
    at lookupTokenUsingModuleInjector (core.mjs:4137:39)
    at getOrCreateInjectable (core.mjs:4185:12)
    at Module.ɵɵdirectiveInject (core.mjs:11996:19)
    at NodeInjectorFactory.CategoriasListComponent_Factory [as factory] (categorias-list.component.ts:10:37)
    at getNodeInjectable (core.mjs:4391:44)
    at createRootComponent (core.mjs:15644:35)

Thats my service:

export class CategoriaServiceList {

  url: string = 'https://localhost:7239/api/Categorias/listarcategorias';
  list: Categoria[] = [];
  constructor(private http: HttpClient) { }

  listCategory() {
    this.http.get(this.url)
    .subscribe( {
      next: res => {
        this.list = res as Categoria[];
      },
      error: error => {
        console.log(error)
      }
      
    });
  }

}

``

There is my component:

import { Component, OnInit } from '@angular/core';
import { Categoria } from '../models/categoria.model';
import { CategoriaServiceList } from '../services/categoria.service';

@Component({
  selector: 'app-categorias-list',
  templateUrl: './categorias-list.component.html',
  styleUrl: './categorias-list.component.css'
})
export class CategoriasListComponent implements OnInit {

  constructor(public service: CategoriaServiceList) { }


  ngOnInit(): void {
    this.service.listCategory();
  }

}

And here, im trying to loop this array to display the categories of my application on html of the component, but the error prowa:

<table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">Id</th>
                <th scope="col">Nome</th>
                <th scope="col">Url</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let item of service.list">
                <td>{{ item.id }}</td>
                <td>{{ item.nome }}</td>
                <td>{{ item.url }}</td>
              </tr>
            </tbody>
  </table>

Ranushan Rachu · Accepted Answer · 2023-12-23 22:08:17Z

5

You need to provide @Injectable on your service.

If you provide your service by root, you’re no need to providing your service on module/component. Otherwise you need to specify on your component “CategoriasListComponent”. Like :

@Component({
  selector: 'app-categorias-list',
  templateUrl: './categorias-list.component.html',
  styleUrl: './categorias-list.component.css',
  providers: [CategoriaServiceList]
})

answered Dec 23, 2023 at 22:08

Ranushan Rachu

662 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matthieu Riegler · Accepted Answer · 2023-12-23 21:13:33Z

4

You're likely missing

@Injectable({providedIn: 'root'})

on your service.

answered Dec 23, 2023 at 21:13

Matthieu Riegler

59.9k27 gold badges158 silver badges208 bronze badges

8 Comments

Breno Van Dall Over a year ago

im actually doing it, but in the same service, im doing to things, adding and listing, is it right?

Matthieu Riegler Over a year ago

What do you mean in the same service ?

Breno Van Dall Over a year ago

i gonna make two comments below, just for not getting out of the character limit range. These two comments, are only one service at my code, look

Breno Van Dall Over a year ago

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { AddCategoriaRequest } from '../models/add-categoria-request.model'; import { HttpClient } from '@angular/common/http'; import { Categoria } from '../models/categoria.model';  @Injectable({   providedIn: 'root' }) export class CategoriaService {    constructor(private http: HttpClient) { }    addCategory(model: AddCategoriaRequest): Observable<void> {     return this.http.post<void>('https://localhost:7239/api/Categorias', model);   }  }

Breno Van Dall Over a year ago

export class CategoriaServiceList {    url: string = 'https://localhost:7239/api/Categorias/listarcategorias';   list: Categoria[] = [];   constructor(private http: HttpClient) { }    listCategory() {     this.http.get(this.url)     .subscribe( {       next: res => {         this.list = res as Categoria[];       },       error: error => {         console.log(error)       }            });   }  }

|

Collectives™ on Stack Overflow

angular - ERROR NullInjectorError: No provider for

2 Answers 2

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related