Use messageService in global HttpInterceptor

UI Components for Angular
Post Reply
AndreaMaffe
Posts: 2
Joined: 30 Nov 2020, 13:11

30 Nov 2020, 13:24

Hello,

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

app.component.html

Code: Select all

<p-toast key="notification" position="top-right"></p-toast>
app.module.ts

Code: Select all

providers: [ ...
      {
        provide: HTTP_INTERCEPTORS,
        useClass: ErrorInterceptor,
        multi: true,
      },
 ...
errror-interceptor.interceptor.ts

Code: Select all

import { Injectable } 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 errors are successfully caught and printed in conosole by the interceptor; however, the messageService does not display the dialog at all.
I also point out that i use messageService in other part of the application with the same code and it works perfectly: it just does not work in the global interceptor.

Any help would be useful.

huynhlehoangduc
Posts: 2
Joined: 05 Nov 2020, 20:49

05 Dec 2020, 11:38

AndreaMaffe wrote:
30 Nov 2020, 13:24
Hello,

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

app.component.html

Code: Select all

<p-toast key="notification" position="top-right"></p-toast>
app.module.ts

Code: Select all

providers: [ ...
      {
        provide: HTTP_INTERCEPTORS,
        useClass: ErrorInterceptor,
        multi: true,
      },
 ...
errror-interceptor.interceptor.ts

Code: Select all

import { Injectable } 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 errors are successfully caught and printed in conosole by the interceptor; however, the messageService does not display the dialog at all.
I also point out that i use messageService in other part of the application with the same code and it works perfectly: it just does not work in the global interceptor.

Any help would be useful.
I have same problem, and need a help. Thanks

sbubaron
Posts: 2
Joined: 03 Mar 2017, 20:34

10 Dec 2020, 05:03

I was having a similar issue, my messages sent from the global error handler weren't appearing while messages from other components were.

First I went through and made sure no other component or module was "providing" MessageService -- I think the primeng documentation suggests providing it in the app.component.ts which I also removed.

Then I added MessageService to the providers array in app.module

Now it appears to be working as expected.

(primeng 11/angular 11)

AndreaMaffe
Posts: 2
Joined: 30 Nov 2020, 13:11

11 Dec 2020, 10:35

sbubaron wrote:
10 Dec 2020, 05:03
I was having a similar issue, my messages sent from the global error handler weren't appearing while messages from other components were.

First I went through and made sure no other component or module was "providing" MessageService -- I think the primeng documentation suggests providing it in the app.component.ts which I also removed.

Then I added MessageService to the providers array in app.module

Now it appears to be working as expected.

(primeng 11/angular 11)
I tried to remove MessageService as provider in every component and I add it to the providers array in app.module, but messages still don't appear when caught by the global interceptor.

Where did you put the <p-toast> tag?

sbubaron
Posts: 2
Joined: 03 Mar 2017, 20:34

11 Dec 2020, 10:46

In my app.component.html same as you, I am also using a key, are you using the key in your message service call?

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 15 guests