Custom Http headers in Angular 2 for every request

Question

In my Angular 2 application, I'm trying to use Http (@angular/http) to make requests to my API. For these requests to work, I need certain headers to be added to every request I make to the API (including a JWT header).

What I'd like to do is have an API class that takes care of creating the Http requests and some error handling and validation etc.

As it turns out, however, I cannot use the Http class from my API class, as it will come up with the following error;

user.service.ts

import { Injectable } from '@angular/core';
import {User} from "../models/User";
import {API} from "../API";
import {Http} from "@angular/http";

@Injectable()
export class UserService
{
    constructor (private http : Http) {}

    getProfile (user : User)
    {
        let api = new API (this.http);

        return api.doRequest ('/user/' + user.id + '/profile');
    }
}

API.ts

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

export class API
{
    ...

    constructor (private http : Http) {}

    doRequest (url : string, method : string, data?)
    {
        let headers = {...};
        let options = new RequestOptions ({ headers: new Headers (headers), ... } );

        return this.http.get (url, data, options)
            .catch ((error) => { ... } );
    }
}

Things work better when using Http straight from the UserService, however.

Is there a way to fix this, or perhaps a better way to achieve the desired result? Should I just extend Http?

Is there a reason you can't just use http within the API class, and not pass it in at all (that somehow looks wonky, I don't think it's a good idea to pass around an instance of an injected service...why not just inject it into the class that's going to use it)? And wouldn't you need to call API.doRequest? — Tim Consolazio

Aravind Aravind · Accepted Answer · 2017-03-09T20:36:09

You should be using append() method to add headers and then pass it to request object as below

 doRequest (url : string, method : string, data?)
    {
        headers= new Headers();
        headers.append(name1,value1);
        headers.append(name2,value2);
        ....
        let options = new RequestOptions ({ headers: headers, ... } );

        return this.http.get (url, data, options)
            .catch ((error) => { ... } );
    }

Custom Http headers in Angular 2 for every request

user.service.ts

API.ts

2 Answers