Troubleshooting Angular 5: Interceptor Fails to Intercept Requests

Question

Troubleshooting Angular 5: Interceptor Fails to Intercept Requests

I have a valid JWT token stored in local storage and an interceptor that I borrowed from a tutorial. However, the interceptor is not intercepting requests and adding headers as expected.

Here's where I am making a request:

https://github.com/Marred/Informakcja/blob/master/Informakcja-client/src/app/services/information.service.ts

Here is the code for the interceptor:

https://github.com/Marred/Informakcja/blob/master/Informakcja-client/src/app/services/token.interceptor.ts

In addition, I believe my appmodule is correctly imported:

https://github.com/Marred/Informakcja/blob/master/Informakcja-client/src/app/app.module.ts

When I make a request, I expect the interceptor to log specific messages to the console and add the token to the header. However, it is not functioning as intended and I am unsure why. I compared my code to other online tutorials but did not find any differences that could be causing this issue. My experience with Angular is limited, so debugging this has been challenging.

Any assistance or guidance would be greatly appreciated.

javascript angular typescript angular-http-interceptors

Answer 1

Answer №1

There are a couple of things that need to be corrected in your implementation:

Interceptors should be used with HttpClientModule instead of HttpModule. Currently, you are using HttpModule which needs to be changed to HttpClientModule.

Add HttpClientModule to the imports array in your app.module.ts
Import HttpClient in your authentication.service.ts file and include its reference in the constructor.

Refer to the following code snippets for guidance:

// app.module.ts
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
.
.
@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, // add here
    RouterModule.forRoot([
      // routes configuration
    ]),
  ],
  providers: [
    // other service providers
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

and

// information.service.ts and authentication.service.ts

import { HttpClient} from '@angular/common/http'; // add import statement
.
.
@Injectable()
export class InformationService {

  constructor(private http: HttpClient) { } // make changes in constructor

  add(link: string, title: string, description: string) {
    return this.http.post('api/Information', { link: link, title: title, description: description })
    .map((response: Response) => {
        console.log(response);
    });
  }
}

Similar changes should be made in the authentication.service.ts file as well.

Answer 2

There are a couple of things that need to be corrected in your implementation:

Interceptors should be used with HttpClientModule instead of HttpModule. Currently, you are using HttpModule which needs to be changed to HttpClientModule.

Add HttpClientModule to the imports array in your app.module.ts
Import HttpClient in your authentication.service.ts file and include its reference in the constructor.

Refer to the following code snippets for guidance:

// app.module.ts
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
.
.
@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, // add here
    RouterModule.forRoot([
      // routes configuration
    ]),
  ],
  providers: [
    // other service providers
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule { }

and

// information.service.ts and authentication.service.ts

import { HttpClient} from '@angular/common/http'; // add import statement
.
.
@Injectable()
export class InformationService {

  constructor(private http: HttpClient) { } // make changes in constructor

  add(link: string, title: string, description: string) {
    return this.http.post('api/Information', { link: link, title: title, description: description })
    .map((response: Response) => {
        console.log(response);
    });
  }
}

Similar changes should be made in the authentication.service.ts file as well.

Troubleshooting Angular 5: Interceptor Fails to Intercept Requests

Answer №1

Similar questions

Update the content of a div element with the data retrieved through an Ajax response

incorrect choice of ngClass

Nodemon has encountered an issue: Unable to listen on port 5000. The address is already in use

No data is being returned by the Jquery Ajax function

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

VueJS added a new object to the array, but the data did not update reactively

Modify the properties of an element based on another

Finding the length of a filter in an AngularJS directive

Every time Lodash.uniqueId is called, it consistently generates the value of

Could you explain the distinction between these two arrow functions?

Having trouble sending JSON data to the server using a POST request

What is the minimum number of lines that can be used for javascript code?

AngularJS - the element of surprise in execution sequence

I keep encountering a parser error when making an AJAX call to retrieve JSON data. It seems to be caused by

Is a package.json file missing dependencies?

Create an HTML button on the homepage that directs users to the "about" page

Creating instance methods in a TypeScript object can be accomplished by defining the methods within the object's class definition. When the object is

Is there a way to modify the edit button to become a save button and include a cancel button?

Utilizing a function as an argument in another function (with specified parameters)

I am having trouble with retrieving and showing Json data in a table using axios within a React component