Error in adding headers to http.get in Angular 4

Question

I'm trying the following code:

  let myHeader = new HttpHeaders();
    myHeader.append("Authorization", Token);
    return this.http
      .get(this.service.GetDomainPrefix() + "Source/Download/" + id, 
        {       
          headers: myHeader, responseType: ResponseContentType.Blob
    }).map(res => {
    return {
      filename: name + '.mp4',
      data: res.blob()
    };
  })

but getting the following error:

Argument of type '{headers: HttpHeaders; responseType: ResponseContentType.Blobl;}' is not assignable to parameter of type 'RequestOptionsArgs'. Type 'HttpHeaders' is not assignable to type 'Headers'

The problems is only with the headers, because without it there are no errors. How can I add a head to my get request?

Is this for adding a security token to every request? If so, wouldn't be better an interceptor to do that instead for adding the header in every place you have an http request? — lealceldeiro
– lealceldeiro, Commented Jul 17, 2018 at 13:24
Are you using http(@angular/http) or HttpClient(@angular/common/http) ? — eduPeeth
– eduPeeth, Commented Jul 17, 2018 at 14:08

David · Accepted Answer · 2018-07-17 13:59:22Z

1

It's probably because you are using HttpModule (angular 2,4) instead of the new HttpClientModule (angular 4,5,6) (and the Http class instead of HttpClient class)

Also, HttpHeaders are immutable. To use the new HttpClientModule, use this code

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

constructor(private http: HttpClient){}
//...
let myHeader = new HttpHeaders().append("Authorization", Token);
    return this.http
      .get(this.service.GetDomainPrefix() + "Source/Download/" + id, 
        {       
          headers: myHeader, responseType: 'blob'
    })
.map(res =>  {
      filename: name + '.mp4',
      data: res
          })

And you need to modify your AppModule to import HttpClientModule instead of HttpClient

edited Jul 17, 2018 at 13:59

answered Jul 17, 2018 at 13:26

David

34.6k13 gold badges90 silver badges124 bronze badges

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

3 Comments

Aa Yy Over a year ago

Unfortunately it is still not working. Error: Argumet of type headers: httpheaders; responsetype; responsecontenttype; is not assignable to parameter of type {headers? httpheaders; observe?: body; params?: httpparams...............

David Over a year ago

Did you set responseType: 'blob' like in my answer?

David Over a year ago

res is already a blob with the new HttpClient. I edited my answer

eduPeeth · Accepted Answer · 2018-07-17 14:26:08Z

1

// HttpClient(@angular/common/http)

let myHeader = new HttpHeaders();
    myHeader.append("Authorization", Token);
let options =  {       
          headers: myHeader, responseType: 'blob'
    }

// Http(@angular/http)

 let myHeader = new Headers();
    myHeader.append("Authorization", Token);

let options = new RequestOptions() {       
          headers: myHeader, responseType: ResponseContentType.Blob
    }

//Request

return this.http
      .get(this.service.GetDomainPrefix() + "Source/Download/" + id, options).map(res => {
    return {
      filename: name + '.mp4',
      data: res.blob()
    };
  })

answered Jul 17, 2018 at 14:26

eduPeeth

1,86817 silver badges21 bronze badges

Comments

Sujay · Accepted Answer · 2018-07-17 13:27:11Z

0

import {Headers} from 'angular2/http'; var headers = new Headers();

This is what you should use. It's written in the error in simple words i.e. not assignable to type HttpHeaders(). You must use Headers()

answered Jul 17, 2018 at 13:27

Sujay

6531 gold badge5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Error in adding headers to http.get in Angular 4

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related