In angular 4 I have used a code snippet like;

let h = [{Content: 'application/json'}];

this.http.post(server, this.userDataObj, {headers: h}).....

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

Now I am constantly getting an error

ERROR TypeError: values.join is not a function

I inspected the error location and I found at the file http.es5.js there is a code like;

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

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

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

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

I tried ;

var headers = new Headers();
headers.append("Content", 'application/json');

this.http.post(server, this.userDataObj, {headers: headers}).subscribe(.....

Which also giving me 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 same error.

Is it a bug? Or am I doing any mistake? Any idea will be very helpful for me.

PS: I am new to Angular4.

In angular 4 I have used a code snippet like;

let h = [{Content: 'application/json'}];

this.http.post(server, this.userDataObj, {headers: h}).....

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

Now I am constantly getting an error

ERROR TypeError: values.join is not a function

I inspected the error location and I found at the file http.es5.js there is a code like;

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

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

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

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

I tried ;

var headers = new Headers();
headers.append("Content", 'application/json');

this.http.post(server, this.userDataObj, {headers: headers}).subscribe(.....

Which also giving me 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 same error.

Is it a bug? Or am I doing any mistake? Any idea will be very helpful for me.

PS: I am new to Angular4.

• javascript
• angularjs

• Headers aren't an array. They are RequestOptions object. This SO question should help stackoverflow./questions/41133705/… – Wainage Commented Aug 1, 2017 at 4:28
• I tried the your mentioned question's accepted answer, still same error. What I tried mention in the question now.Please check. I bee clueless now. :( – KOUSIK MANDAL Commented Aug 1, 2017 at 4:34

3 Answers 3

Angular 4.3:

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

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

first use those imports

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

then add the headers like this

var headers = new Headers();

headers.append("Content", 'application/json');

this.http.post(server, this.userDataObj, {headers: headers })

import { HttpClient, HttpHeaders } from '@angular/mon/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);
      }
  }
}

this is working on ........