catchError not activated in http interceptor - Angular 15/16

Question

I come from angularJs that I've been using for many years. I am starting a new project using angular 15/16 standalone components and try to handle http errors in relation with my server. But the catchError that manages all the stuff is never reached.

import {inject} from '@angular/core';
import {HttpErrorResponse, provideHttpClient, withInterceptors} from '@angular/common/http';
import {throwError} from 'rxjs';
import {catchError, map} from "rxjs/operators";
import {Router} from "@angular/router";
import {AuthService} from "./auth/auth.service";

export const httpProvider = provideHttpClient(
    withInterceptors([
        (req, next) => {
            const authService = inject(AuthService)
            const authToken = authService.token
            if(authToken !== null) {
                let auth = "Guest " + authToken
                req = req.clone({
                    setHeaders: {
                        Authorization: auth
                    }
                })
            }
            return next(req).pipe(
                catchError((error: HttpErrorResponse) => {
                    let code = 0
                    if (error.error instanceof ErrorEvent) {
                        // client-side error
                        console.log(error.message)
                    } else {
                        code = error.status
                        switch(code) {
                            case 461 : // token non valide
                                authService.invalidToken()
                                break
                            case 401 : // utilisateur non loggé
                            case 403 : // accès interdit
                                inject(Router).navigate(['login'])
                                break
                        }
                    }
                    return throwError(() => {
                        return code
                    })
                })
            )
        }
    ])
)

Here is the http call in the authService

checkGuest = async () =>
    {
        try {
            const url = this.serverURL + 'contact/guest'
            this.contact = await firstValueFrom(
                this.http.get<Contact|false>(url).
                pipe(
                    retry(0)
                )
            )
        }
        catch (code) {
            console.log("contact/guest : code " + code)
        }
    }

And this is the main of the application

import {AppComponent} from "./app/app.component";
import {bootstrapApplication} from "@angular/platform-browser";
import {InjectionToken} from "@angular/core";
import {routeProvider} from "./app/app.routes";
import {httpProvider} from "./app/app.http";
import {provideAnimations} from "@angular/platform-browser/animations";

export const SERVER_URL= new InjectionToken<string>('Server url');

bootstrapApplication(
    AppComponent,
{
        providers :[
            {
                provide: SERVER_URL,
                useValue: 'https://myserver.com/server/'
            },
            routeProvider,
            httpProvider,
            provideAnimations()
        ]
    }
)
.catch(err => console.error(err));

The interceptor by itself is working. On the call, the token is inserted in the header. I placed a debug stop in the catchError block. When my server returns a 403 error, the catchError is never reached.

catchError not activated in http interceptor - Angular 15/16

0 Answers0