Angular 5 http interceptor not intercepting

Question

I've got a correct JWT token stored in local storage and an interceptor that I blatantly copied from a tutorial. However, it doesn't intercept and add headers to requests.

Here's where I make a request:

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

here's the interceptor:

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

and my appmodule - I'm pretty sure it's 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 messages that I specified to console and add the token to header, it doesn't do that though and I've got no idea why :/ I checked the code with some other tutorials found online and didn't see any differences capable of breaking my code. I also don't have enough experience with Angular to debug it properly.

Any help would be much apprecieated.

Answer 1

You are doing couple of things wrongly here:

Interceptors are used with HttpClientModule not with HttpModule. You are using HttpModule. You need to change to HttpClientModule

1. Add HttpClientModule in imports array in app.module.ts
2. Import HttpClient in your authentication.service.ts and take its reference in its constructor.

Refer below code:

  //app.module.ts
    import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
    .
    .
    .
    @NgModule({
      declarations: [
        AppComponent,
       .
       .
       .
      ],
      imports: [
        BrowserModule,
        .
        .
        .,
        HttpClientModule, //add here
        RouterModule.forRoot([
          { path: '', redirectTo: 'home', pathMatch: 'full' },
          { path: 'home', component: HomeComponent },
          { path: 'login', component: LoginComponent },
          { path: 'register', component: RegisterComponent },
          { path: 'add-information', component: AddInformationComponent },
          { path: '**', redirectTo: 'home' }
        ], { useHash: true })
      ],
      providers: [
        { provide: 'BASE_URL', useValue: 'https://some URL/' },
        UserService,
        InformationService,
        AuthenticationService,
        AlertService,
        {
          provide: HTTP_INTERCEPTORS,
          useClass: TokenInterceptor,
          multi: true
        }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

and

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

import { Injectable, Inject } from '@angular/core';
import { HttpClient} from '@angular/common/http'; //added import
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class InformationService {

  constructor(private http: HttpClient, @Inject('BASE_URL') private baseUrl: string) { } //made changes in cunstructor

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

make similar changes in authentication.service.ts