Passing an options argument to the httpClient.post method doesn't always compile

Why can't I pass the options argument to the httpClient.post<T> method call ?

httpClient.post<T>

The following code doesn't compile when I uncomment the second return line :

@Injectable()
export class CustomHttpService

constructor(private httpClient: HttpClient)

public postWithHeaders<T>(url: string, body: string, headers?: HttpHeaders


This is all the more puzzling when I can have in another class the following source code that compiles just fine :

public login(username: string, password: string): Observable<any>
console.log('Sending the login credentials to obtain a token');
const credentials = 'email' : username, 'password' : password ;
// Have the response headers included in the response object
const options =
observe: 'response' as 'body'
;
const url: string = environment.USER_REST_URL + '/login';
return this.httpClient.post<any>(url, credentials, options);



The vscode IDE shows the following compile issue :

[ts]
L'argument de type ' headers: object; observe: "body"; responseType: string; ' n'est pas attribuable au paramètre de type '{ headers?: HttpHeaders | [header: string]: string ; observe?: "body"; params?: Ht...'.
Les types de la propriété 'headers' sont incompatibles.
Impossible d'assigner le type 'object' au type 'HttpHeaders | [header: string]: string '.
Impossible d'assigner le type 'object' au type ' [header: string]: string '.
Signature d'index manquante dans le type ''.
const options:
headers: object;
observe: "body";
responseType: string;



And the console shows the following issue :

ERROR in src/app/core/service/custom-http.service.ts(17,51): error TS2345: Argument of type ' headers: object; observe: "body"; responseType: string; ' is not assignable to parameter of type '{ headers?: HttpHeaders | [header: string]: string ; observe?: "body"; params?: Ht...'.
Types of property 'headers' are incompatible.
Type 'object' is not assignable to type 'HttpHeaders | [header: string]: string '.
Type 'object' is not assignable to type ' [header: string]: string '.
Index signature is missing in type ''.


The issue has nothing to do with the headers. Even if removing the headers property from the options object, the issue remains the same.

headers

UPDATE: The issue was indeed related to the headers property. Having the prepareHeader method return type to HttpHeaders fixed the issue. Why didn't the IDE reflect this when I tried that before I cannot explain.

headers

prepareHeader

HttpHeaders

I'm under Angular 6.0.4.

6.0.4

prepareHeader

HttpHeaders

2 Answers
2

The problem is that, the return type of prepareHeader() is object. Change it to HttpHeaders. That is the reason compiler is throwing an error.

prepareHeader()

object

HttpHeaders

Type 'object' is not assignable to type 'HttpHeaders | [header:
string]: string '.

Modify the return type to HttpHeaders

HttpHeaders

private prepareHeader(headers: HttpHeaders | null): HttpHeaders new HttpHeaders();
headers = headers.set('Content-Type', 'application/json');
headers = headers.set('Accept', 'application/json');
return headers;



Also modify the observe and responseType properties as follows.

observe

responseType

const options =
headers: this.prepareHeader(headers),
observe: 'response' as 'body', // Have the response headers included in the response object
responseType: 'json' as 'json'
;


There is an open issue related to observe and responseType properties.

observe

responseType

headers

prepareHeader

HttpHeaders

Use HttpHeaders instead of this.prepareHeader(headers).

HttpHeaders

this.prepareHeader(headers)

import HttpHeaders from '@angular/common/http';

const options =
headers: new HttpHeaders(
'Content-Type': 'application/json' ,
)


headers

options

headers

prepareHeader

HttpHeaders

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.