Error with NGPrime MessageServices and Interceptor

Question

I've been dealing with this problem for a day and a half and I can't find a solution. I created an interceptor to capture error messages on HTTP calls and I wanted it to display an error message with the PrimeNG MessageService.

The interceptor works ok but when I call the MessageService I get this error:

TypeError: Cannot read properties of undefined (reading 'add')

I have already tried a thousand things and none of them work for me.

This is my code:

app.module.ts

import { HTTP_INTERCEPTORS, HttpClient, HttpErrorResponse, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Injectable, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { JwtModule } from '@auth0/angular-jwt';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './core/helpers/auth-guard';
import { RedirectInterceptor } from './core/interceptors/redirect.interceptor';
import { NotfoundComponent } from './demo/components/notfound/notfound.component';
import { AppLayoutModule } from './layout/app.layout.module';
import { HomePageComponent } from './shared/components/home-page/home-page.component';
import { MasterTableComponent } from './shared/components/master-table/master-table.component';
import { PrimeNgModule } from './shared/primeng.module';
import { MessageService } from 'primeng/api';
import { ErrorInterceptor } from './core/interceptors/error.interceptor';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Router } from '@angular/router';
import { Observable, catchError, throwError } from 'rxjs';

export function tokenGetter() {
  return localStorage.getItem("token");
}

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@Injectable()
export class ErrorInterceptor2 implements HttpInterceptor {
  constructor(protected router: Router, private translate: TranslateService, private messageService: MessageService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err: HttpErrorResponse) => {
        console.log(err.error.error)
        this.messageService.add({ key:'error-notif', severity: 'error', summary: 'Error', detail: err.error.error });
        console.log('message send');
        /* let errorText = this.translate.get(err.error.error).subscribe((res: string) => {
          console.log(res);
        });
        console.log(errorText); */
        return throwError(() => err.error.error);
      })
    );
  }
}

@NgModule({
  declarations: [
    AppComponent, NotfoundComponent, MasterTableComponent, HomePageComponent
  ],
  imports: [
    AppRoutingModule,
    AppLayoutModule,
    PrimeNgModule,
    FormsModule,
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ["localhost"],
      },
    }),
    TranslateModule.forRoot({
      defaultLanguage: 'es',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    PrimeNgModule
  ],
  providers: [
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: HTTP_INTERCEPTORS, useClass: RedirectInterceptor, multi: true },
    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor2, multi: true, deps: [MessageService] },
    AuthGuard,
    MessageService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<p-toast key="error-notif" position="top-left"></p-toast>
<router-outlet></router-outlet>```