Angular 5 HTTP interceptor not working

My interceptor service is adding the authorization header to my http calls, but fails to include the actual bearer token value that I pass into the interceptor service. The bearer token value that appears in chrome dev tools is just the 'not set' value, not the bearer token value. The bearer token value does show correctly when I console log it from the login component so I know is it being set, but I guess it is getting reset back to the 'not set' value at some point before it is used in the subsequent http call?

import { Component, OnInit } from '@angular/core'; import { Router } from "@angular/router"; import { HttpClient } from "@angular/common/http"; import { Response, Headers, RequestOptions } from "@angular/http"; import { AuthInterceptor } from "../../services/authInterceptor.service"; import { MatSnackBar } from '@angular/material'; import "rxjs/Rx"; @Component({ selector: 'login', templateUrl: './login.component.html' }) export class LoginComponent implements OnInit { memberLogin: any = { 'emailAddress': '', 'password': '' }; public constructor(private http: HttpClient, private authInterceptor: AuthInterceptor, public snackBar: MatSnackBar, public router: Router) { } public ngOnInit() { } public login() { let url: string = 'http://localhost:63741/api/Account/Login'; let body = { "Email": this.memberLogin.emailAddress, "Password": this.memberLogin.password }; this.http.post(url, body) .subscribe( data => { this.authInterceptor.authToken = data.toString(); console.log('token data in login component : ' + this.authInterceptor.authToken); this.snackBar.open('welcome back, you are now logged in', 'ok', { duration: 2200 }) }, err => { }); return; }; } import { Injectable } from '@angular/core'; import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; @Injectable() export class AuthInterceptor { authToken: string = 'not set'; intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const authReq = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + this.authToken ) }); return next.handle(authReq); } }