Router navigation stops working inside catchError when using SSR

I'm using Angular 19.1.7 and noticing something strange with my redirect interceptor. It works fine when just serving the application, but as soon as I run it with SSR the navigation doesn't happen and the application is stuck trying to load the route indefinitely without a response from the server.

This seems to only happen when placing the redirect inside the catchError operator. I'm suspecting it might have something to do with what I'm returning from catchError, and other similar questions with older Angular versions suggest returning EMPTY instead of of(error) but that doesn't work either.

Also tried return from(router.navigateByUrl('/404', { skipLocationChange: true })); since the navigation returns a promise but same result.

How can I get this working properly?

Redirect test (works):

export function redirectInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {

const router = inject(Router);

router.navigateByUrl('/404', { skipLocationChange: true })

return next(req);
}


Redirect within catchError (not working):

export function redirectInterceptor(req: HttpRequest<unknown>, next: HttpHandlerFn): Observable<HttpEvent<unknown>> {

const router = inject(Router);

return next(req).pipe(
catchError(error => {

... omitted stuff ...

// If route couldn't be redirected to another, go to 404 page
router.navigateByUrl('/404', { skipLocationChange: true });

return of(error);
})
);
}

Continue reading...