Angular HttpInterceptor not changing header

Question

I wrote an angular (4.3.6) HttpInterceptor to add some header fields, but the header doesn't get updated if I inspect them in the debugger. Any idea?

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {


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

        console.log('AuthInterceptor at work');

        const contentTypeReq = req.clone({
            headers: req.headers.set('Content-Type', 'application/json')
        });

        const token  = localStorage.getItem('token');
        if (token) {
            const authReq = contentTypeReq.clone({
                headers: req.headers.set('Authorization', 'Bearer ' + token)
            });
            return next.handle(authReq);
        }

        // Pass on the cloned request instead of the original request.
        return next.handle(contentTypeReq);
    }
}

Answer 1

They are lazy. For example keys method looks like:

keys(): string[] {
    this.init(); <== initialize

    return Array.from(this.normalizedNames.values());
}

If you want to check them just call:

req.headers.keys()

If you want to check value you can use get or getAll method:

req.headers.getAll('Content-Type')

Or you can call init method from console and then you will be able to see headers in headers Map

Moreover when angular adds headers to request it uses forEach method that calls init method too.