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

Experiencing difficulties accessing Facebook using ngFacebook on angularjs application

Encountering difficulties importing a component from a library into my Nx Expo React Native application

Retrieve the properties from within a closure function in a functional component

What is the method to verify if a variable in ES6 is constant?

Updating a session or global variable cannot be read by an AJAX request

Encountering difficulties with Bootstrap toggle functionality in Angular 2.0 following the establishment of a MEAN stack

Changes made to the V-model property will only be reflected after the page is refreshed

Issue with AngularJS Cross-Origin Resource Sharing (CORS) when making HTTP requests, whereas standard Ajax and jQuery are

Troubleshooting SDK Integration with Axeptio in Nuxt3

The AgGridModule type does not feature the property 'ɵmod'

Locating elements with Selenium Webdriver using xpath

Using Vue components alongside vanilla JavaScript code

Angular script error when running 'npm run' on select computers causing Unix command issues for some users but not all

After stopping the interval with clearInterval(), you can then use the res.send method

Proper positioning of popover ensures it does not exceed the boundaries of its parent

Tips for showing JSON information in Nativescript

An error occurred: Unable to access the 'basemapLayer' property due to it being undefined

Error Encountered with Nested Angular Material Tabs

Utilizing JavaScript to Parse Datasnap Output

Referencing an object by using a variable containing its name