Before upgrading to Angular 18 and a function based interceptor, I was using the traditional class based interceptor and was able to throw up alerts on the screen when an error occurred using a simple AlertService. Now, I’ve upgraded to Angular 18 and the function based interceptor, and I’ve also moved to PrimeNG and am using the built in [message service]https://primeng.org/messages#service they provide for alerting.

The messaging just doesn’t appear on screen. No error or anything so I’m having a lot of trouble figuring out what the issue is. I wouldn’t be opposed to specifically using the MessageModule PrimeNG provides but I’m not familiar with how to import modules or even access modules within a function based interceptor.

Here is my interceptor:

import { HttpEvent, HttpRequest, HttpHandlerFn, HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { AuthService } from './auth.service';
import { Observable, throwError } from 'rxjs';
import { mergeMap, catchError, map, finalize } from 'rxjs/operators';
import { DataService } from './data.service';
import { MessageService } from 'primeng/api';

const settings = require('../configuration/settings?v=1.0.0');


export const Interceptor: HttpInterceptorFn = (
  req: HttpRequest<any>,
  next: HttpHandlerFn
): Observable<HttpEvent<any>> => {


  const _data = inject(DataService);
  const _authService = inject(AuthService);
  const _messageService = inject(MessageService);

  // Use different request for API vs Graph (not implemented)
  // console.log(req.url)
  _data.isLoading.next(true)
  return _authService.getAccessTokenSilently$().pipe(
    mergeMap(token => {
      // console.log('interceptor: access: ' + token);

      const tokenReq = req.clone({
        setHeaders: {
          Authorization: `Bearer ${token}`,
          VersionVerify: 'true',
          Version: settings.version,
          'Cache-Control': 'no-cache',
          Pragma: 'no-cache'
        }
      });

      return next(tokenReq).pipe(
        map(event => {
          // _data.isLoading.next(false)
          return event;
        }),
        finalize(() =>  _data.isLoading.next(false)),
        catchError(err => {
          if (err && err.error && err.error.message && err.error.message.match(/^Version:/)) {
            let data = err.error.data;
            if (data != null && data.version != null) {
              console.log("Version (ours)|(curr):  (" + settings.version + ")|(" + data.version + ")")
            }
            
            // THIS DOESNT WORK FROM THE INTERCEPTOR FOR SOME REASON
            _messageService.add({
              severity: 'error',
              summary: 'Error',
              detail: 'You do not have the current version. Please do a hard-refresh of your browser (Ctrl-F5)',
            });
        
            // Send the request again, but do not verify version
            const versionReq = req.clone({
              setHeaders: {
                Authorization: `Bearer ${token}`,
                'Cache-Control': 'no-cache',
                Pragma: 'no-cache'
              }
            });

            return next(versionReq).pipe(
              map(event => {
                return event;
              }),
              finalize(() =>  _data.isLoading.next(false)),
              catchError(err => {
                return throwError(() => err);
              })
            )
          }
          return throwError(() => err)
        })
      )
    }),
    catchError(err => throwError(() => err))
  )
};