Angular 4.3.3 HttpClient : Comment obtenir la valeur de l'en-tête d'une réponse ?

Question

( Editeur: VS Code; Typescript: 2.2.1 )

Le but est d'obtenir les en-têtes de la réponse de la requête

Supposons une requête POST avec HttpClient dans un service

import {
    Injectable
} from "@angular/core";

import {
    HttpClient,
    HttpHeaders,
} from "@angular/common/http";

@Injectable()
export class MyHttpClientService {
    const url = 'url';

    const body = {
        body: 'the body'
    };

    const headers = 'headers made with HttpHeaders';

    const options = {
        headers: headers,
        observe: "response", // to display the full response
        responseType: "json"
    };

    return this.http.post(sessionUrl, body, options)
        .subscribe(response => {
            console.log(response);
            return response;
        }, err => {
            throw err;
        });
}

Documentation HttpClient Angular

Le premier problème est que j'ai une erreur de Typescript :

'Argument de type '{ 
    headers: HttpHeaders; 
    observe: string; 
    responseType: string;
}' n'est pas assignable au paramètre de type '{ 
    headers?: HttpHeaders;
    observe?: "body";
    params?: HttpParams; reportProgress?: boolean;
    respons...'.

Types de propriété 'observe' sont incompatibles.
Le type 'string' n'est pas assignable au type '"body"'.'
à: '51,49' source: 'ts'

En effet, lorsque je vais à la référence de la méthode post(), je pointe sur ce prototype (j'utilise VS code)

post(url: string, body: any | null, options: {
        headers?: HttpHeaders;
        observe?: 'body';
        params?: HttpParams;
        reportProgress?: boolean;
        responseType: 'arraybuffer';
        withCredentials?: boolean;
    }): Observable;

Mais je veux cette méthode surchargée :

post(url: string, body: any | null, options: {
    headers?: HttpHeaders;
    observe: 'response';
    params?: HttpParams;
    reportProgress?: boolean;
    responseType?: 'json';
    withCredentials?: boolean;
}): Observable>;

Donc, j'ai essayé de corriger cette erreur avec cette structure :

  const options = {
            headers: headers,
            "observe?": "response",
            "responseType?": "json",
        };

Et ça compile ! Mais je reçois simplement le corps de la requête au format json.

En outre, pourquoi dois-je mettre un symbole ? à la fin de certains noms de champs ? Comme je l'ai vu sur le site Typescript, ce symbole devrait simplement indiquer à l'utilisateur qu'il est facultatif ?

J'ai également essayé d'utiliser tous les champs, sans et avec des ?

EDIT

J'ai essayé les solutions proposées par Angular 4 obtenir les en-têtes de la réponse API. Pour la solution map :

this.http.post(url).map(resp => console.log(resp));

Le compilateur Typescript indique que map n'existe pas car ce n'est pas une partie de Observable

J'ai aussi essayé ceci

import { Response } from "@angular/http";

this.http.post(url).post((resp: Response) => resp)

Ça compile, mais je reçois une réponse de type support non pris en charge. Ces solutions devraient fonctionner pour "Http" mais pas sur "HttpClient".

EDIT 2

J'obtiens également une réponse de type de support non pris en charge avec la solution @Supamiu, donc il y aurait une erreur sur mes en-têtes. Donc la deuxième solution ci-dessus (avec le type Response) devrait aussi fonctionner. Mais personnellement, je ne pense pas que ce soit une bonne façon de mélanger "Http" avec "HttpClient" donc je vais garder la solution de Supamiu

Answer 1

Parfois, même avec la solution ci-dessus, vous ne pouvez pas récupérer les en-têtes personnalisés s'il s'agit d'une requête CORS. Dans ce cas, vous devez autoriser les en-têtes souhaités côté serveur.

Par exemple: Access-Control-Expose-Headers: X-Total-Count