How to use Prime NG messageService in global HttpInterceptor?

I am currently trying to implement a global error handler in my application using PrimeNG 9 messageService and Angular 8 HttpInterceptor. My code is the following:

app.component.html

//....

<p-toast key="notification" position="top-right"></p-toast>


app.module.ts

providers: [ ...
{
provide: HTTP_INTERCEPTORS,
useClass: ErrorInterceptor,
multi: true,
},
...


errror-interceptor.interceptor.ts

import { Injectable, ɵConsole } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { MessageService } from 'primeng/api';
import { Router } from '@angular/router';

@Injectable({
providedIn: 'root'
})
export class ErrorInterceptor implements HttpInterceptor {

constructor(
private messageService: MessageService,
private router: Router
) {}

public intercept(httpRequest: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>> {
if (httpRequest.method !== 'GET')
return next.handle(httpRequest);
else {
return next.handle(httpRequest).pipe(
catchError( (err: HttpErrorResponse) => {
console.log(err)
this.messageService.add({
key: 'notification',
severity: 'error',
summary: 'Woops! There was an error!',
});
return throwError(err);
})
);
}

}


The interceptor successfully catches errors and prints them in the console. However, the toast is never displayed. I also point out that i make use of messageService in other components and the toasts are correctly displayed, it just does not work in the interceptor.

Continue reading...