Intercepting HTTP Response headers with Angular 4.3's HttpInterceptor

I found the answer. It was (of course) a CORS Problem. I am using a CORS Filter and I needed to explicitely expose my custom header. I hope this can help others eventually.

Looks like a server-side CORS filter configuration.

By default, only the 6 simple response headers are exposed:

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.

Use Access-Control-Expose-Headers to expose the headers.

Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers

To see the headers, access the 'headers' within the response. The headers are lazily evaluated it seems, thus they are not visible. I suppose that the headers get evaluated only when you explicitly ask for them using resp.headers.get. However, you can get the list of headers in the response using res.headers.keys(). Eg.

yourFunction.subscribe((res:HttpResponse<any>)=>{console.log('response from server:',res);
      console.log('response headers',res.headers.keys())
    } );