Can't inject Router into HttpInterceptor (Angular 7)

Question

I want to inject the Angular Router into my HttpInterceptor. Unfortunately, the following error is thrown in the browser console:

TypeError: this.router is undefined

I've added this to my constructor as usual:

constructor (private router: Router) {

}

Additionally, I did the following in my providers array inside the app.module.ts:

{
  provide: HTTP_INTERCEPTORS,
  useClass: MyService,
  multi: true,
  deps: [Router]
}

I want to use the current url inside an if statement in my error handler to provide specific functionalities for different routes:

myErrorHandler(error: HttpErrorResponse) {
   if (this.router.url === 'test') {
     // do something
   } else {
     return throwError(error).pipe(
       // do something
     );
   }
}

What am I doing wrong?

Can you give some more context? the code in the question looks fine. — Lemon, Apr 30 '19 at 17:14
@Lemon I have updated my question. I want to get the current route (url) in my interceptor and use it within an error handler. — Codehan25, Apr 30 '19 at 17:53
@Codehan25 Did you manage to solve this problem? I am encountering the same issue with the same setup. — Babyburger, Apr 04 '20 at 10:06

score 3 · Answer 1 · answered Apr 04 '20 at 11:05

I found the answer from another relevant topic: Angular 6 Service is undefined after injecting in Interceptor

Basically, the injected constructor variable is not available from the function you pass to the catchError function. You need to access the router directly in your ´intercept method´ like this:

constructor(private router: Router) {
}

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError((errorResponse: HttpErrorResponse) => {
            // this.router is defined here
        })
    );
}

The problem seems to lie within the catchError. If you print the current scope this in both the intercept and catchError functions you get MyInterceptor and CatchSubscriber respectively. this.router is not available from the CatchSubscriber. You can still use separate functions by adding a private method in your interceptor class:

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
        catchError((errorResponse: HttpErrorResponse) => {
            this.handleError(errorResponse);
        })
    );
}

private handleError(errorResponse: HttpErrorResponse) {
     // this.router is defined here
}

To summarize:

catchError(this.handleError)  // does not work because of different scope

catchError(err => this.handleError(err))  // works because of same scope

this saved me from some headache. – vadimbog Jun 04 '20 at 13:46 — vadimbog, Jun 04 '20 at 13:46

score 0 · Answer 2 · answered Apr 30 '19 at 15:35

0

Have you done this? Too obvious?

import { Router } from "@angular/router";

answered Apr 30 '19 at 15:35

Robin Webb

1,355
1
8
15

Sure :) I think there is something special with Interceptors but I can‘t find anything in the docs. – Codehan25 Apr 30 '19 at 15:40

score 0 · Answer 3 · answered Apr 30 '19 at 19:19

0

You could try using injector.

constructor(inj: Injector) {
this.router = inj.get(AuthService) }

You should note that it is not possible to import a service that contains httpClientModule to avoid a cyclic dependency.

answered Apr 30 '19 at 19:19

Seinei

1
1

Can't inject Router into HttpInterceptor (Angular 7)

3 Answers3