Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2 - HTTP RequestOptions HEADERS

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.

like image 568
Zander17 Avatar asked Apr 04 '17 11:04

Zander17


People also ask

How do you pass headers in angular HTTP?

There are two ways by which we can add the headers. One, we add the HTTP Headers while making a request. The second way is to use the HTTP interceptor to intercept all the Requests and add the Headers. In both cases, we use the httpHeaders configuration option provided by angular HttpClient to add the headers.

What is RequestOptions in angular?

Creates a request options object to be optionally provided when instantiating a Request . This class is based on the RequestInit description in the Fetch Spec. All values are null by default. Typical defaults can be found in the BaseRequestOptions class, which sub-classes RequestOptions .


4 Answers

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

like image 142
bviale Avatar answered Oct 03 '22 22:10

bviale


You have to update headers by:

let headers =  {headers: new  HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded'})};
like image 30
Vivek Kapoor Avatar answered Oct 02 '22 22:10

Vivek Kapoor


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

like image 20
ValRob Avatar answered Oct 02 '22 22:10

ValRob


// 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)));
like image 40
arul prince Avatar answered Oct 02 '22 22:10

arul prince