Angular2/http Exception no ConnectionBackend
<p>I attempting to use an angular2 http request, but I am getting the following error:
[Error] EXCEPTION: No provider for ConnectionBackend! (AppComponent -> Http -> ConnectionBackend)</p>

<p>I have setup a barebones app which has the same problem, and am at a loss to what is causing it. </p>

<p>Thanks in advance</p>

<p>app.component.ts</p>

<pre><code>import {Component} from 'angular2/core';
import {Http, Headers} from 'angular2/http';

@Component({
  selector: 'app',
  template: `
    &lt;button (click)="getEmployee()"&gt;Get&lt;/button&gt;
    &lt;p&gt;{{employee.email}}&lt;/p&gt;

  `,
  providers: [Http]
})

export class AppComponent {
  employee: {"email": "bob"};
  http: Http;

  constructor(http:Http){
    this.http = http;
  }

  getEmployee(){
    this.http.get('localhost:8080/employee-rates?id=0')
      .map(response =&gt; response.json()).subscribe(result =&gt; this.employee = result);
  }


}
</code></pre>

<p>main.ts</p>

<pre><code>import {AppComponent} from './app.component';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';

bootstrap(AppComponent, [
  HTTP_PROVIDERS, HTTP_BINDINGS
]);
</code></pre>

<p>index.html</p>

<pre><code>&lt;html&gt;

  &lt;head&gt;
    &lt;base href="/"&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;script src="js/es6-shim/es6-shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/systemjs/dist/system-polyfills.js"&gt;&lt;/script&gt;

    &lt;script src="js/angular2/bundles/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script src="js/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="js/rxjs/bundles/Rx.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular2/bundles/angular2.dev.js"&gt;&lt;/script&gt;
    &lt;script src="js/angular2/bundles/http.dev.js"&gt;&lt;/script&gt;

    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script&gt;
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    &lt;/script&gt;

  &lt;/head&gt;

  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;div class='small-12'&gt;
      &lt;app&gt;Loading...&lt;/app&gt;
    &lt;/div&gt;
  &lt;/body&gt;

&lt;/html&gt;
</code></pre>