How to use Http providers in angular2 GA?

Question

I am trying to use angular 2 Http service but I am getting

Can't resolve all parameters for AppComponent: (?)

Which has this signature

 constructor(public http:Http){ }

I tracked the problem down to declaring the providers for Http.

In the angular 2 quickstart they say

In this demo, we register providers by importing other NgModules to our root NgModule.

But I already have

@NgModule({
    imports: [ BrowserModule, HttpModule, FormsModule ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

So, I understand the providers should be fine.

In the code documentation for file http.d.ts I find this:

 * import {Http, HTTP_PROVIDERS} from '@angular/http';

But when I try to write this, I get that HTTP_PROVIDERS does not exist (I guess it is before GA)

The only way I can solve this error is by adding @Inject(Http) in the signature.

How can I make it work without adding @Inject(Http) in the signature?

This is my systemjs config

  <script>
        System.config({
            transpiler: 'typescript',
            map: {
                '@angular/core': './node_modules/@angular/core/bundles/core.umd.js',
                '@angular/platform-browser-dynamic': './node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
                '@angular/platform-browser': './node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
                '@angular/compiler': './node_modules/@angular/compiler/bundles/compiler.umd.js',
                '@angular/common': './node_modules/@angular/common/bundles/common.umd.js',
                '@angular/http': './node_modules/@angular/http/bundles/http.umd.js',
                '@angular/forms': './node_modules/@angular/forms/bundles/forms.umd.js',
                'rxjs': './node_modules/rxjs'
            },
            packages: {
                './app': {
                    defaultExtension: 'ts'
                },
                '@angular/http':{
                    defaultExtension:'ts'
                },
                'rxjs': {
                    defaultExtension: 'js'
                }
            }
        })

        System.import('./app/main.ts').catch(function (err) {
            console.error(err);
        });

    </script>

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}

You can see all my code at https://github.com/GuyMograbi/angular2-simple-setup

Answer 1

You need to add HttpModule to imports in NgModule

@NgModule({
  imports: [BrowserModule, HttpModule]
  ...
})

No need for @Inject() for Http.

Ensure you have properly imported (TS imports) everything Http, HttpModule, ...

Answer 2

Completely rewriting my answer to be better targeted.

Your module:

import {...} from '@angular/...';

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

@NgModule({
    imports: [..., HttpModule],
    declarations: [...],
    exports: [...],
    providers: [...]
})
export class AppModule {}

Your component:

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

@Component({
    selector: 'my-app',
    template: `...`
})
export class AppComponent{

    constructor(private http: Http){
    }

    private getMyData(){
        return this.http.get(...)
            .map(...)
            .subscribe(...);
    }
}

That should be all you need. There is no @Injectable decorator on the AppComponent because it's a @Component, it's not an injectable service.

Angular takes care of injecting for you, so you shouldn't need to do any kind of @Inject(Http) anywhere.

Only your own services that you create that you want components (or other services) to use should be created as @Injectable. E.g.

import {Injectable} from '@angular/core';

@Injectable()
export class SomeService{
    doSomething(){
        //...
    }
}

You would add that SomeService to either your Module level providers array (for app-level singleton) or even your Component's own providers array (for new instances along with the components).

import {SomeService} from './some.service';

@Component({
    selector: '...',
    template: '...',
    providers: [SomeService]
})
export class SomeComponent{ 
    constructor(private someService: SomeService){
        // someService is a new instance of SomeService (not a singleton)
    }
}

Notice, though, that there's no additional @Inject code - the providers (either module level or component level, depending on your needs), deal with creating an instance for you, and passing it to the constructor.

Edit to respond to the updated question:

I think your systemjs.config might be wrong. I see your app pointing to a ts file instead of js. Browsers don't really run ts, ts needs compiling (transpiling - pick your term of choice) into js. The js is what systemjs.config should be loading, not the ts.

packages: {
    app: {
        main: './main.js',
        defaultExtension: 'js'
    },
    rxjs: {
        defaultExtension: 'js'
    },
    'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
    }
}

Answer 3

You should add typescriptOptions to your systemjs configuration

index.html

 System.config({
    transpiler: 'typescript',
    typescriptOptions: {
     "emitDecoratorMetadata": true
    },
    map: {
    ....

See also angularjs 2.0: Can't inject anything through component constructor()

Your tsconfig.json isn't used in your configuration. You're transpiling files on the fly. You could take a look at this simple seed project https://github.com/alexzuza/angular2-typescript-systemjs