Angular HttpClient.get headers

Question

i have this simple code as a service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class SpotifyService {
  constructor(private http: HttpClient) {
  }

  getQuery(query: string) {
    const cabecera: HttpHeaders = new HttpHeaders({
      'Authorization': 'Bearer BQDWZC2Y_iSV3rfmAhv-QxDpmhhJbbmgCnspy7HpIZPX5CbJ74D4Xl4aOyXLUL4smF2gZ_V3wiSXLxdLFPY'
    });
    const url = 'https://api.spotify.com/v1/' + query;
    return this.http.get(url, { cabecera });
  }
  getNewReleases() {
    return this.getQuery('browse/new-releases').pipe(map( data => data['albums'].items));
  }
}

but i'm getting this error and i dont understand why.

Argument of type '{ cabecera: HttpHeaders; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Object literal may only specify known properties, and 'cabecera' does not exist in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.

abdullahkady abdullahkady · Accepted Answer · 2018-08-31T01:30:50

Your return this.http.get(url, { cabecera }); line is semantically incorrect, this means/resolves to the following :

return this.http.get(url, 
    { cabecera : new HttpHeaders({
        'Authorization': 'Bearer BQDWZC2Y_iSV3rfmAhv-QxDpmhhJbbmgCnspy7HpIZPX5CbJ74D4Xl4aOyXLUL4smF2gZ_V3wiSXLxdLFPY'
    }) 
});

Which is wrong since the options object passed to the HTTP Client doesn't expect a key called cabecera but instead a headers key.

So this can be solved simply by replacing the line with this : return this.http.get(url, { headers: cabecera });

Angular HttpClient.get headers

1 Answers