title: How to use Http providers in angular2 GA?
body: <p>I am trying to use angular 2 Http service but I am getting </p>
  
  <blockquote>
    <p>Can't resolve all parameters for AppComponent: (?)</p>
  </blockquote>
  
  <p>Which has this signature </p>
  
  <pre><code> constructor(public http:Http){ }
  </code></pre>
  
  <p>I tracked the problem down to declaring the providers for Http. </p>
  
  <p><a href="https://angular.io/docs/ts/latest/guide/server-communication.html" rel="nofollow">In the angular 2 quickstart</a> they say </p>
  
  <blockquote>
    <p>In this demo, we register providers by importing other NgModules to our root NgModule.</p>
  </blockquote>
  
  <p>But I already have </p>
  
  <pre><code>@NgModule({
      imports: [ BrowserModule, HttpModule, FormsModule ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
  })
  </code></pre>
  
  <p>So, I understand the providers should be fine. </p>
  
  <p>In the code documentation for file <code>http.d.ts</code> I find this: </p>
  
  <pre><code> * import {Http, HTTP_PROVIDERS} from '@angular/http';
  </code></pre>
  
  <p>But when I try to write this, I get that <code>HTTP_PROVIDERS</code> does not exist (I guess it is before GA)</p>
  
  <p>The only way I can solve this error is by adding <code>@Inject(Http)</code> in the signature. </p>
  
  <p>How can I make it work without adding <code>@Inject(Http)</code> in the signature?</p>
  
  <p>This is my systemjs config </p>
  
  <pre><code>  &lt;script&gt;
          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);
          });
  
      &lt;/script&gt;
  </code></pre>
  
  <p>This is my tsconfig.json</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "moduleResolution": "node",
      "sourceMap": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "removeComments": false,
      "noImplicitAny": false
    }
  }
  </code></pre>
  
  <p>You can see all my code at <a href="https://github.com/GuyMograbi/angular2-simple-setup" rel="nofollow">https://github.com/GuyMograbi/angular2-simple-setup</a></p>