Angular报错NullInjectorError：CategoriaServiceList无提供者

问题与报错信息 #

尝试从ASP.NET后端获取分类数据并在Angular组件中展示时，触发以下错误：

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)

相关代码 #

服务代码（CategoriaServiceList） #

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

}

组件代码（CategoriasListComponent） #

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

}

组件HTML代码 #

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

解决方案 #

这个错误的核心原因是Angular依赖注入系统找不到CategoriaServiceList的提供器，需要为服务注册提供器，有两种常用方式：

方式一：给服务添加@Injectable装饰器（推荐） #

修改服务代码，添加@Injectable装饰器并指定providedIn: 'root'，这样服务会被注册为全局单例：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Categoria } from '../models/categoria.model';

@Injectable({
  providedIn: 'root'
})
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)
      }
      
    });
  }

}

方式二：在AppModule中注册服务 #

打开app.module.ts，在providers数组中添加CategoriaServiceList：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 确保已导入HttpClientModule
import { CategoriaServiceList } from './services/categoria.service';

import { AppComponent } from './app.component';
import { CategoriasListComponent } from './categorias-list/categorias-list.component';

@NgModule({
  declarations: [
    AppComponent,
    CategoriasListComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 必须导入，否则HttpClient无法使用
  ],
  providers: [CategoriaServiceList], // 注册服务
  bootstrap: [AppComponent]
})
export class AppModule { }

额外注意 #

确保HttpClientModule已经在AppModule的imports数组中导入，否则服务中的HttpClient也会触发依赖注入错误。

内容的提问来源于stack exchange，提问作者Breno Van Dall