não retorna o header correto

Estou fazendo o login, porém não está retornando o token.

authenticate(username:string, password:string){

    return this.http
      .post(
        API_URL + '/login', 
        { username, password }, 
        { observe: 'response'} 
      )
      .pipe(tap(res => {
        const authToken = res.headers.get('x-access-token');
        console.log(authToken);
        console.log(res);      
      }));

  }

Console do Chrome:

HttpResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:8081/login", ok: true, …}
body
:
null
headers
:
HttpHeaders
headers
:
Map(3)
size
:
(...)
__proto__
:
Map
[[Entries]]
:
Array(3)
0
:
{"pragma" => Array(1)}
1
:
{"cache-control" => Array(1)}
2
:
{"expires" => Array(1)}
length
:
3
lazyInit
:
null
lazyUpdate
:
null
normalizedNames
:
Map(3) {"pragma" => "pragma", "cache-control" => "cache-control", "expires" => "expires"}
__proto__
:
Object
ok
:
true
status
:
200
statusText
:
"OK"
type
:
4
url
:
"http://localhost:8081/login"
__proto__
:
HttpResponseBase
clone
:
ƒ (update)
constructor
:
ƒ HttpResponse(init)
__proto__
:
Object

Versão do angular

"@angular/animations": "^6.1.0",
    "@angular/cdk": "^6.4.1",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/flex-layout": "^6.0.0-beta.17",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.1",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0",
    "jwt-decode": "^2.2.0",
    "bootstrap": "^4.1.2",
    "font-awesome": "^4.7.0",
    "zone.js": "^0.8.26"