Angular 4.3 Interceptor not working

I try to use new Angular 4.3 interceptors for setting authorithation header for all requests. However, it is not working. I set breakpoint into the interceptors intercept method and browser did not hit it, so it seems like angular just ignores my interceptor. Please help me, thanks in advance.

user.service.ts:

import {Injectable} from '@angular/core';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs";
import {Http} from "@angular/http";

@Injectable()
export class UserService {

  constructor(public http: Http) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts').map(contacts => contacts.json());
  }
}

token.interceptor.ts

import {Injectable} from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import {AuthService} from "./shared/auth.service";

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(public auth: AuthService) {
  }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      setHeaders: {
        Authorization: `Bearer ${this.auth.getToken()}`
      }
    });
    return next.handle(request);
  }
}

app.module.ts:

@NgModule({
  ...
  providers: [
    ...
    {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
  ]
})

TL;DR Make sure there is one import of the HttpClientModule in the entire app (recommened) or provide valid interceptor configuration for each one (ofc for testing only).

Make sure that HttpClientModule is not imported multiple times across different modules of the app. I had it imported in lazy loaded modules. Each import creates a new copy of HttpClient using configuration from the module where it is imported, so interceptors provided in a root module are overwritten.

The reason - you use old Http service instead of new service, introduced in Angular 4.3 - HttpClient (Http is going to be deprecated). Also, in the HttpClient JSON response type is assumed by default, so you should ommit .map(contacts => contacts.json()).

app.module.ts

...
import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   HttpClientModule,
   ...
 ],
 providers: [
   ...
   {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true}
 ]
 ...
})

user.service.ts

...
import {HttpClient} from "@angular/common/http";

@Injectable()
export class UserService {

  constructor(public http: HttpClient) {
  }

  public getContacts(): Observable<any[]> {
    return this.http.get('/users/contacts');
  }
}

Angular 4.3 Interceptor not working

Related

Recent Posts