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?

The part where I commented "This method is not recognized anymore.." — Codehan25
– Codehan25, Commented Jul 24, 2019 at 8:30
Change it to this.createHttpErrorMessage(...) OR make the method static and invoke it using HttpInterceptorService.createHttpErrorMessage(...) — Nicholas K
– Nicholas K, Commented Jul 24, 2019 at 8:34
++ Why do you really need a static reference in your service class? — Nicholas K
– Nicholas K, Commented Jul 24, 2019 at 8:37
With this.createHttpErrorMessage the console says: _this.createHttpErrorMessage is not a function. It seem to work with making the method static and move it to the top. I also had to make another method static in order to make it work. I had to make it static because a lot of other stuff is going on in that service and it was the only way to make it work :( — Codehan25
– Codehan25, Commented Jul 24, 2019 at 8:56
If you want you can post your comment as an answer to let me confirm it :) — Codehan25
– Codehan25, Commented Jul 24, 2019 at 8:58

Nicholas K · Accepted Answer · 2019-07-24 09:02:36Z

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(...)

answered Jul 24, 2019 at 9:02

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related