Angular2 - HTTP RequestOptions HEADERS

Question

I currently have an issue with tslint and was hoping someone could point me in the right direction.

I'm trying to send an HTTP GET request using HTTP provided by the Angular2 framework. With this request, I must specify the content-type and the bearer authentication token.

Example of my code:

let headers = new Headers();
let authToken = this._user.getUser().JWT;
headers.append('Content-Type', 'application/json');
headers.append('Authorization', `Bearer ${authToken}`);
let options = new RequestOptions({ headers: headers });

this._http.get('http://' + url '/', options)
            .timeout(3000)
            .subscribe(
                (res) => {

This works, however, tslint is complaining that

"TS2345: Argument of type '{ headers: Headers; }' is not assignable to parameter of type 'RequestOptionsArgs'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'Headers'. Two different types with this name exist, but they are unrelated. Property 'keys' is missing in type 'Headers'."

I appreciate the support.

consider use const instead of let for both options and headers — Amin
– Amin, Commented Apr 10, 2018 at 17:12

bviale · Accepted Answer · 2018-01-18 10:33:51Z

201

Update

As of today, @angular/http has been deprecated, and @angular/common/http should be used instead. So the best way to work with http headers is to import import { HttpHeaders } from '@angular/common/http'; (documentation).

Old answer

The Headers type you are supposed to import is import { Headers } from '@angular/http';.

Check your imports

edited Jan 18, 2018 at 10:33

answered Apr 4, 2017 at 11:15

bviale

5,3933 gold badges30 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Zander17 Over a year ago

That was it! I'm using Phpstorm and is usually pretty good and clearly showing me that I've missed a dependency but didn't this time. Furthermore, I don't find the tslint message very clear. Cheers :)

GoTo Over a year ago

Somehow there is a Headers class even if you don't import it. So you have to make sure you import the right one (see answer above) in order for it to work.

Abhi Over a year ago

For Angular 5, this helped me import { Headers, RequestOptions } from '@angular/http'; DOCUMENTATION

DonkeyBanana Over a year ago

@Abhi It says in the docs that Headers is deprecated and we should use HttpHeaders from @angular/common/http instead. But that doesn't really work... Thoughts?

Abhi Over a year ago

@DonkeyBanana I find THIS as a good referrence

|

Nisse Engström · Accepted Answer · 2018-01-22 07:38:35Z

9

You have to update headers by:

let headers =  {headers: new  HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded'})};

edited Jan 22, 2018 at 7:38

Nisse Engström

4,76323 gold badges29 silver badges44 bronze badges

answered Jan 22, 2018 at 6:49

Vivek Kapoor

5218 silver badges8 bronze badges

Comments

ValRob · Accepted Answer · 2018-04-21 07:12:30Z

4

Update for Angular 5

import { RequestOptions } from '@angular/http';

I found this in the comments from the correct answer, so If this helps somebody, good luck.

Documentation: https://angular.io/api/http/RequestOptions

edited Apr 21, 2018 at 7:12

answered Apr 12, 2018 at 15:34

ValRob

2,7529 gold badges36 silver badges44 bronze badges

2 Comments

test_124 Over a year ago

This is deprecated.

ValRob Over a year ago

Yeah, it looks like it had change in the last days. check the documentation, now is import { RequestOptions } from '@angular/http';

arul prince · Accepted Answer · 2019-02-26 05:33:56Z

2

// example of headers of content type Json

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

const Url = 'http://localhost:3000/';
const headers = new Headers;
const body = JSON.stringify({
title: "data" 
});
headers.append('Content-Type', 'application/json');
this.http.post(Url, body, { headers: headers })
.pipe(map((res => res)));

edited Feb 26, 2019 at 5:33

answered Feb 25, 2019 at 13:37

arul prince

3032 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angular2 - HTTP RequestOptions HEADERS

4 Answers 4

7 Comments

Comments

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

2 Comments

Comments

Linked

Related