Angular守卫中Primeng Toast无法显示，报NullInjectorError错误求助

核心问题 #

你将MessageService注册在AppComponent的providers数组中，这属于组件级依赖注入范围，而CanActivateFn类型的路由守卫是在Angular的根注入器上下文中执行的，根注入器无法访问组件级别的提供者，因此抛出NullInjectorError。

解决步骤 #

1. 将MessageService注册到根注入器

需要把MessageService提升到根级别提供，有两种常用方式：

方式一：NgModule项目（Angular 13及以下）

在app.module.ts的providers数组中注册MessageService：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MessageService } from 'primeng/api';
import { ToastModule } from 'primeng/toast';
import { AppComponent } from './app.component';
// 其他必要导入

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ToastModule, /* 你的路由模块等 */],
  providers: [MessageService], // 根级别注册服务
  bootstrap: [AppComponent]
})
export class AppModule { }

方式二：Standalone组件项目（Angular 14+）

在main.ts的bootstrapApplication配置中添加MessageService到根提供者：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideRouter } from '@angular/router';
import { MessageService } from 'primeng/api';
// 路由配置等其他导入

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter([/* 你的路由规则 */]),
    MessageService // 根级别注册服务
  ]
});

2. 清理组件级重复注册

移除AppComponent中的providers: [MessageService]配置，避免重复提供服务引发冲突：

@Component({
  selector: 'app-root',
  imports: [Toast],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  // 移除这一行：providers: [MessageService]
})
export class AppComponent implements OnInit {
  // ...
}

3. 确保Toast组件已在模板中声明

在app.component.html中添加Primeng的Toast组件标签，否则即使调用messageService.add()也无法显示提示：

<!-- app.component.html -->
<p-toast></p-toast>
<!-- 其他页面内容 -->

验证 #

完成以上修改后，重启应用并尝试访问需要权限的页面：未登录状态下，守卫会调用MessageService添加错误提示，Toast组件会正常显示"Access Denied"的提示信息。

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