Invoke a static method from within a class in Typescript (Angular HttpInterceptor)

Recently, I've been working on an http interceptor that was functioning smoothly until just yesterday.

It consists of static methods, and for some reason, one of them is now causing issues.

Here is the error message displayed in the console:

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)

Below is a snippet of the code from the interceptor that might be relevant to the bug:

// Excerpt from the interceptor code

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

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

  // Intercept method and other functions go here...

  createHttpErrorMessage(error: HttpErrorResponse, statusText: string) {
    // Function to create error message
  }

  handleHttpError(error: HttpErrorResponse) {
    // Function to handle HTTP errors
  }
}

Up until the recent error, the interceptor had been functioning correctly without any issues. Can you spot what I might be doing wrong here?

Answer №1

If you need to resolve the compilation problems, consider implementing one of the following solutions.

  • Call it by using

    this.createHttpErrorMessage(...)
    

OR

  • Change the method to static and call it like this

    HttpInterceptorService.createHttpErrorMessage(...)
    

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Component with nested FormGroup does not have a valid value accessor for form control in Angular

In my setup, the parent component is utilizing a FormGroup and I am expecting the child components to notify any changes in value back to the parent. To achieve this, I am trying to implement NG_VALUE_ACCESSOR in the child component so that it can act like ...

Encountering overload error with Vue 3 and Axios integration

Currently utilizing Vue 3, Vite, Axios, and TypeScript. While my function functions properly in development, it throws an error in my IDE and during the build process. get count() { axios({ method: "get", url: "/info/count", h ...

Angular, Transforming JSON with RxJS Operators in TypeScript

Upon receiving the JSON object (Survey) from the server, it looked like this: { "id": 870, "title": "test survey", "questions": [ { "id": 871, "data": ...

"Can you show me how to create a dotted-object-path type from an Object

Is there a way to use ts-toolbelt's Object.Paths and String.Join to generate all paths of an object as String literals with dot separators, creating a Union type like the example below? // Object const obj = { a: 'abc', b: 'def&apos ...

Can Node.js version 11 support node-sass in Angular projects?

I'm encountering a compilation error with my code. Could this be due to the node version? Does node-sass work with all versions of node? If not, how can I resolve this issue? Compilation error: Unable to locate module 'node-sass' ...

Can you explain the significance of this particular method signature in the TypeScript code snippet shown above?

Referencing the ngrx example, we encounter the code snippet for the method store.select, which has a complex signature with two arrows. What is the significance of this method signature? The interface definition in the type file presents the following sig ...

What is the best way to organize an Angular library for multiple import paths similar to @angular/material, and what advantages does this approach offer?

When importing different modules from @angular/material, each module is imported from a unique package path, following the format of @organization/library/<module>. For example: import { MatSidenavModule } from '@angular/material/sidenav'; ...

What are the steps to launch a Firebase application without requiring user authentication?

I have a unique firebase app/game that does not require authentication. My main goal is to allow anyone to easily access the website or mobile app and start playing right away, without the need for user IDs. I have been receiving numerous emails from Fireb ...

What advantages does Angular's Dependency Injection offer for a basic object setup?

The Angular documentation provides an example of injecting a value (configuration object) using @inject in the constructor for scenarios where a class is not being injected. https://angular.io/guide/dependency-injection#non-class-dependencies I managed t ...

How to ensure Service is loaded before App Component in Angular 6?

My Data service is responsible for fetching the JSON Object value, however all components load before the data service finishes loading. This results in undefined values when I call the service method from components. ...

Some challenges encountered in Typescript/tslint

Just starting out with Typescript and trying basic annotations. First, having trouble with one of the imports. Second, unable to recognize type inside object destructuring. Third, facing issues with JSX implementation. Here is my code: import * as React ...

Measuring Feedback: Utilizing Angular 4 to calculate review ratings

I'm facing a challenge while working on a review form using Firebase and Angular 4. The issue is with calculating the total length of added reviews and the sum of their ratings. Each time a new review is submitted, it gets pushed to a list of objects ...

App-Root in Angular 2 not loading properly in ExpressJS route

As a newcomer to NodeJS and Express, I am trying to create a simple '/' route that points to Angular's default index.html file located at client/src/index.html. This file contains the app-root tag. While the '/' route successfully ...

Potential breakpoint (Breakpoint established but not yet linked)

My experience with debugging my Angular app in Chrome was going smoothly through the Chrome Debugger extension with automatic settings. However, something changed after a Windows 7 reboot and all my breakpoints became inactive. I suspect this was due to a ...

The @Input directive is failing to receive any data from its parent component

Recently, I delved into the workings of Angular's @Input feature and have found it quite useful thus far. My database is Firebase, and the data snippet I am fetching looks like this: { "page_area_business_image" : { "expand" : { ...

Having issues with Bootstrap customization in an Angular 7 project

I am currently working on customizing a Bootstrap 4 theme within an Angular 7 project. After installing Bootstrap, I updated my angular .json file to include the following: "styles": [ "./node_modules/@angular/material/prebuilt-themes/de ...

Angular 6 offers a dynamic auto complete feature that enhances user

My Angular app has auto-complete functionality enabled. I am using ngFor to iterate over an array of objects and passing the index of the object array to a function for some operations. Below is the code snippet I have tried: template.html <mat-form ...

Error in executing a function within an asynchronous function sequence

Whenever a user logs in, I want to update their data in Firestore. However, the code I am using does not seem to work as expected. It fails to create a custom User object from the firebase.User. Can anyone help me understand why this is happening and how ...

Is there a way to selectively filter and display certain data in an Angular data table?

https://i.sstatic.net/0N3OZ.jpg I am currently working on a project using Angular 7 frameworks that involves dealing with large amounts of data. One of the tasks is to filter out trial units based on the 'userName' field in the raw data. I have ...

Fixing the issue of 'Unrecognized character < in JSON at position 0 at JSON.parse'

I have recently deployed my Angular 6 application on Heroku at . However, upon deploying, I encountered the error message: SyntaxError: Unexpected token < in JSON at position 0 during JSON.parse. I am aware that this error occurs when the response ret ...