Angular纯独立组件项目中Interceptor注入PrimeNG MessageService失效问题

你的问题核心在于提供者配置错误，导致MessageService无法被正确注入，拦截器执行到inject(MessageService)时直接阻塞，进而让HTTP请求挂起。

问题根源分析 #

看你main.ts里的这段配置：

importProvidersFrom(MessageService, ToastModule)

importProvidersFrom的作用是导入NgModule中定义的提供者，但MessageService是一个可注入的服务类，并不是NgModule。这种错误配置会让Angular找不到MessageService的有效提供者，inject函数无法获取服务实例，直接卡住了拦截器的执行流程。

解决方案 #

1. 修正main.ts的提供者配置

把MessageService从importProvidersFrom中移除，直接添加到providers数组中；ToastModule作为PrimeNG的模块，保留在importProvidersFrom里：

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    provideHttpClient(withInterceptors([ErrorHandlerInterceptor])),
    MessageService, // 直接注册服务提供者
    importProvidersFrom(ToastModule), // 正确导入NgModule
  ],
}).catch((err) => console.error(err));

2. 确保根组件存在Toast容器

要让MessageService发送的通知正常显示，必须在根组件（比如AppComponent）的模板中添加PrimeNG的Toast容器：

<p-toast></p-toast>

这一步不会解决请求挂起的问题，但能保证后续通知正常展示。

3. 验证拦截器逻辑

修正配置后，拦截器里的console.log('Not here')应该能正常打印，MessageService.add()也能正常执行，HTTP请求不会再出现挂起情况。如果需要处理错误分支的通知，直接在catchError中调用messageService.add()即可。

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