Angular2: unknown provider Http for simple @Injectable HttpApi

Question

I'm trying to setup a simple @Injectable called HttpApi which I then use in app.ts. But I get following error: No provider for Http! (AppComponent -> HttpApi -> Http)

Both TypeScript files are build with the following command:

tsc -m commonjs -t es5 --experimentalDecorators --emitDecoratorMetadata app.ts

I do understand the error but I have no clue on how to fix it. What am I overlooking?

index.html:

<!DOCTYPE html>
<html>

<head>
  <script src="../node_modules/systemjs/dist/system.src.js"></script>
  <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
  <script src="../node_modules/angular2/bundles/http.dev.js"></script>
</head>

<body>
  <app></app>
  <script>
    System.config({
      map: {
        httpApi: 'src/httpApi.js'
      }
    });
    System.import('src/app.js');
  </script>
</body>

</html>

httpApi.ts:

///<reference path="typings/angular2/angular2.d.ts"/>
///<reference path="typings/angular2/http.d.ts"/>

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

@Injectable()
export class HttpApi {
  constructor(public http: Http) {
  }

  public getChampions() {
    return this.http.get('http://localhost:12345/champions')
      .toRx()
      .map(res => this.ResponseToArray(res));
  }
}

app.ts:

/// <reference path="typings/angular2/angular2.d.ts" />

import {Component, View, bootstrap, Inject} from 'angular2/angular2';
import {HttpApi} from 'server';

@Component({
  selector: 'app',
  bindings: [HttpApi]
})
@View({
  templateUrl: 'some.html'
})

class AppComponent {
  champions: Object;
  constructor(httpApi: HttpApi) {
    httpApi.getChampions()
      .subscribe(champions => this.champions = champions);
  }
}

bootstrap(AppComponent, [HttpApi]);

I think you are missing `HTTP_BINDINGS` in your `bootstrap`. Import it from `angular2/http`. **Note** : soon all `*_BINDINGS` will be renamed to `*_PROVIDERS` (see [discussion](https://github.com/angular/angular/issues/4416) and the [PR](https://github.com/angular/angular/pull/4654)) — Eric Martinez, Oct 12 '15 at 21:05
I agree with @EricMartinez . Working demo here with alpha.40 if you are interested in comparing: http://www.syntaxsuccess.com/viewarticle/angular-2.0-and-http — TGH, Oct 13 '15 at 00:54
@EricMartinez Several examples I've seen did not add the http provider (e.g. http://stackoverflow.com/a/30964541/531122), it also feels weird as I already imported Http in the httpApi.ts. Is there a way to add the Http provider in httpApi.ts? (as that is the place where the provider is used..) — Steve Van Opstal, Oct 13 '15 at 10:20

score 0 · Answer 1 · answered Jul 18 '17 at 12:28

This question was asked before Angular release, so the issue which causes unknown provider Http at this moment is different.

With the actual angular release (2+). You need to import HttpModule in the Module in which your service is provided:

import { Http } from '@angular/http';
import { NgModule } from '@angular/core'

@NgModule({
    imports: [
        HttpModule
    ],
    providers: [
        HttpApi
    ]
})
export class HttpSwProxyModule {}

Angular2: unknown provider Http for simple @Injectable HttpApi

1 Answers1