Question posted in
The official documentation can be found here.

Asp.net – angular – ERROR NullInjectorError: No provider for

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>
Tags:

2

Answers


  1. 0

    You’re likely missing

    @Injectable({providedIn: 'root'})

    on your service.

    Login or Signup to reply.
  2. 0

    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]
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search