Angular 16独立组件中NgxPermissionsService注入失败求助

你遇到的NullInjectorError: No provider for NgxPermissionsService!错误，核心原因有两个：

1. 独立组件中仅导入NgxPermissionsModule，不会自动注册该模块的服务提供者；
2. 原代码未通过构造函数正确注入NgxPermissionsService，仅声明属性无法让Angular实例化服务。

下面提供两种可行的解决方式：

方式一：组件级别直接声明服务提供者 #

在组件的providers数组中添加NgxPermissionsService，同时修正构造函数注入逻辑：

import { Component, OnInit } from '@angular/core';
import { NgxPermissionsModule, NgxPermissionsService } from 'ngx-permissions';

@Component({
  selector: 'pd-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [NgxPermissionsModule],
  providers: [NgxPermissionsService] // 新增服务提供者
})
export class AppComponent implements OnInit {
  // 通过构造函数注入服务，而非仅声明属性
  constructor(private permissionsService: NgxPermissionsService) {}

  ngOnInit() {
    const perm = ['ADMIN', 'EDITOR'];
    this.permissionsService.loadPermissions(perm);
  }
}

方式二：根级别全局配置（推荐） #

如果需要在多个独立组件中使用NgxPermissionsService，建议在应用根配置中通过importProvidersFrom导入NgxPermissionsModule.forRoot()，一次性注册全局服务提供者：

修改main.ts：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { importProvidersFrom } from '@angular/core';
import { NgxPermissionsModule } from 'ngx-permissions';

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(NgxPermissionsModule.forRoot())
  ]
});

此时组件只需保留imports: [NgxPermissionsModule]，并通过构造函数注入服务即可：

import { Component, OnInit } from '@angular/core';
import { NgxPermissionsModule, NgxPermissionsService } from 'ngx-permissions';

@Component({
  selector: 'pd-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  imports: [NgxPermissionsModule]
})
export class AppComponent implements OnInit {
  constructor(private permissionsService: NgxPermissionsService) {}

  ngOnInit() {
    const perm = ['ADMIN', 'EDITOR'];
    this.permissionsService.loadPermissions(perm);
  }
}

原理说明 #

NgxPermissionsModule.forRoot()会注册模块的全局服务提供者，确保整个应用范围内可注入NgxPermissionsService。独立组件不具备NgModule的提供者继承机制，因此必须手动通过根配置或组件providers数组显式声明服务提供者。

内容的提问来源于stack exchange，提问作者Pizzoni Alessio