'No provider' error with custom Http implementation

Question

I am trying to write a class that will extend Http and add headers to every request, but when I try to inject this class to providers, I get this error:

browser_adapter.ts:73 EXCEPTION: Error: Uncaught (in promise): No provider for HttpClient! (ListPage -> DealProvider -> HttpClient)

Code of provider:

import {Injectable} from 'angular2/core';
import {HttpClient} from './http-client';
import 'rxjs/add/operator/map';

/*
 Generated class for the DealProvider provider.

 See https://angular.io/docs/ts/latest/guide/dependency-injection.html
 for more info on providers and Angular 2 DI.
 */
@Injectable()
export class DealProvider {
    static get parameters() {
        return [[HttpClient]]
    }

    constructor(http) {
        this.http = http;
        this.data = null;
    }

    load() {
        if (this.data) {
            return Promise.resolve(this.data);
        }

        return new Promise(resolve => {
            this.http.get('http://apiary-mock.com/deal/list/?page=1&search=ahoj&category=1&city=1')
                .map(res => res.json())
                .subscribe(data => {
                    this.data = data;
                    resolve(this.data);
                });
        });
    }
}

Code of HttpClient class:

import {Injectable} from 'angular2/core';
import {Http, Headers} from 'angular2/http';

@Injectable()
export class HttpClient {
    static get parameters() {
        return [[Http], [Headers]]
    }

    constructor(http, headers) {
        this.http = http;
    }

    createHeaders(headers) {
        headers.append('AppVersion', '1.0.0');
        headers.append('DeviceIdent', 'uuid');
        headers.append('Session', 'sdawdbkj213345b345hj3b45');
    }

    get(url) {
        let headers = new Headers();
        this.createHeaders(headers);
        return this.http.get(url, {
            headers: headers
        });
    }
}

Answer 1

You need to provider HTTP_PROVIDERS somewhere:

bootstrap(AppComponent, [HTTP_PROVIDERS])

Answer 2

I see an error in your service:

@Injectable()
export class HttpClient {
  static get parameters() {
    return [[Http, Headers]]
  }
  (...)
}

Moreover you need to have the provider "visible" from the component where the DealProvider class is injected. It can be in the component itself or upper in the injector tree:

• in a component:

  @Component({
    (...)
    providers: [ DealProvider ]
  })
  export class SomeComponent {
    (...)
  }
  

• when boostrapping the main component:

  bootstrap(AppComponent, [ DealProvider ]);
  

Note that injectors are only linked to components and not services.

See this question for more details:

• What's the best way to inject one service into another in angular 2 (Beta)?

Answer 3

Providers have Http included by default, and in order to use Http in your app you will need to add the HttpModule to your app.module.ts: imports add

import { HttpModule } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';

and add HttpModule and HttpClientModule to importrs