Typescript: Call static method inside the class (Angular HttpInterceptor)

Question

I'm currently working on an http interceptor that worked well until yesterday.

It defines static methods and one of them does not want to be recognized.

The console says:

my.component.ts:162 Error in PUT Request TypeError: HttpInterceptorService_1.httpInterceptorService.createHttpErrorMessage is not a function

at TapSubscriber._tapNext (http-interceptor.service.ts:113)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._next (tap.js:45)
at TapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next (take.js:40)
at TakeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at Notification.push../node_modules/rxjs/_esm5/internal/Notification.js.Notification.observe (Notification.js:15)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/operators/delay.js.DelaySubscriber.dispatch [as work] (delay.js:42)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction._execute (AsyncAction.js:63)
at AsyncAction.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js.AsyncAction.execute (AsyncAction.js:51)
at AsyncScheduler.push../node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js.AsyncScheduler.flush (AsyncScheduler.js:43)

My interceptor looks like this (I have reduced it to the parts that are interesting for the bug):

// My imports

@Injectable({
  providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
  // Other static stuff and below my httpInterceptorService
  static httpInterceptorService: HttpInterceptorService;

  constructor(
    httpInterceptorService: HttpInterceptorService,
  ) {
    HttpInterceptorService.httpInterceptorService = httpInterceptorService;;
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const headers = new HttpHeaders({
      // Some headers
    });

    const clone = req.clone({
      // ..
    });

    return next.handle(clone).pipe(
      // ..
    );
  }

  createHttpErrorMessage(error: HttpErrorResponse, statusText: string) {
    const msg: string = error.status + ' ' + error.statusText + ' - ' + statusText;
    switch (error.status) {
      case 404:
        this.showError('Error ID: ' + this.id, msg);
        break;
      default:
        break;
    }
    console.error(
      // Some error messages
    );
  }

  handleHttpError(error: HttpErrorResponse) {
    if (my condition) {
      // some logic
    } else {
      return throwError(error).pipe(
        retryWhen(errors => errors.pipe(
          delay(1000),
          take(1),
          tap(() => {
            switch (error.status) {
              case 404: // This method is not recognized anymore.. 
                HttpInterceptorService.httpInterceptorService.createHttpErrorMessage(
                  error, HttpInterceptorService.otherService.doSomething());
                break;
              default:
                console.error(error);
                break;
              }
            }),
          ),
        )
      );
    }
  }
}

As I said, the Interceptor has worked without any problems so far, until this error appeared yesterday.

What am I doing wrong?

Answer 1

You can make one of the following changes in order to fix the compilation issues.

• Invoke it using

  this.createHttpErrorMessage(...)
  

OR

• Make the method static and invoke it using

  HttpInterceptorService.createHttpErrorMessage(...)