m1uan m1uan - 1 month ago 8
TypeScript Question

Angular2 + typescript + jspm : No provider for Http ( App -> Provider -> Http )

I trying migrate from Webpack to JSPM with system.js. We have simple App component. I was fallowing this article Angular 2 Starter Setup with JSPM, SystemJS and Typescript in atom (Part 1)

import {Component} from 'angular2/core';
import {Bus} from './business.service';

@Component({
selector: 'app',
template: `
<p>Hello World</p>
`,
providers:[Bus]
})
export class App {
constructor(private bus : Bus) { }
}


and simple (business) service with
Http


import {Injectable} from 'angular2/core';
import {Http, Response, Headers, RequestOptions} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class Bus {

constructor(private http: Http){

}
}


In Webpack works fine but here with systemjs I getting this error


EXCEPTION: No provider for Http! (App -> Bus -> Http)


I read Angular2 no provider for NameService but they talking about Angular2 alpha and no provider in provider and we use beta@7

I also play with

import {Component} from 'angular2/core';
//import {Bus} from './business.service';
import {Http, Response, Headers, RequestOptions} from 'angular2/http';
@Component({
selector: 'app',
template: `
<p>Hello World</p>
`,
providers:[Http]
})
export class App {
constructor(private bus : Http) { }
}


but the error is even weirder


EXCEPTION: No provider for ConnectionBackend! (App -> Http -> ConnectionBackend)


I even tryed change to angular2-beta@6. and also angular2-beta@1 Do you know what I do wrong? thank you

Using loader versions:
systemjs@0.19.23

Answer

You need to define the HTTP_PROVIDERS providers when bootstrapping your application:

import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);

or if you want to specify it at your component level:

import {Component} from 'angular2/core';
//import {Bus} from './business.service';
import {Http, Response, Headers, RequestOptions, HTTP_PROVIDERS} from 'angular2/http';
@Component({
  selector: 'app',
  template: `
    <p>Hello World</p>
  `,
  providers:[HTTP_PROVIDERS] // <-----------
})
export class App {
  constructor(private bus : Http) { }
}