Values.join is not a function in the Angular 4 http.es5.js file

Question

In angular 4, I used a piece of code, for example:

let h = [{Content: 'application/json'}]; this.http.post(server, this.userDataObj, {headers: h})..... 

So basically I wanted to add a header to my ajax call.

Now I constantly get an error message

ERROR TypeError: values.join is not a function

I checked the location of the error and found the code in the http.es5.js file:

  req.headers.forEach(function (name, values) { return xhr.setRequestHeader(name, values.join(',')); }); 

Now I added console.log(req.headers) just above the snippet, and I got;

  [Object] 0:Object Content: 'application/json' 

Now, as far as I know, the function inside the forEach loop in the array in JS takes the second argument (which is the values ​​in http.es5.js) is the index of the element. And I tested through console.log(values) , and I got the result 0. Therefore, it is natural that values.join is not a function , and it will never be a function for an integer.

I tried;

 var headers = new Headers(); headers.append("Content", 'application/json'); this.http.post(server, this.userDataObj, {headers: headers}).subscribe(..... 

Which also gives me the same error.

Tried this;

 var h = new Headers(); h.append("kkk", 'aaa'); let options = new RequestOptions({ headers: h }); this.http.post(server, this.userDataObj, options).subscribe(..... 

Still the same error.

This is mistake? Or I'm wrong? Any idea would be very helpful to me.

PS: I am new to Angular4.

Answer 1

Angular 4.3:

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

Answer 2

You need to use Headers from angular/http to add headers to the request.

use these imported first

 import { Http, Headers} from '@angular/http'; 

then add headers like this

 var headers = new Headers(); headers.append("Content", 'application/json'); this.http.post(server, this.userDataObj, {headers: headers }) 

Answer 3

 import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Api } from '../../providers/providers'; export class demo{ response: any; constructor(public api: Api){ this.apiCall(); } apiCall(){ var headers = new HttpHeaders({ 'Content-Type': 'application/json', 'token': 'token_demo' }); this.response = this.api.post("services/user", {}, { headers: headers }); this.response.subscribe((data) => { console.log('data : ' + data); }, err => { console.error("error = ", err); } } } 

working on ........