Error when using trying to use angular2/Http

Question

I have set up a project that is a copy of the quickstart . Now I want to try and load some JSON so I amend app.component.ts to this:

import {Component} from 'angular2/core';
import {Http} from "angular2/http";

@Component({
    selector: 'my-app',
    template: '<h1>Success</h1>'
})
export class AppComponent{
    constructor(private _http:Http){

    }
}

Adding the import is fine but as soon as I add private http:Http to my constructor I get errors:

Uncaught SyntaxError: Unexpected token <         http:1

and

Uncaught SyntaxError: Unexpected token <         angular2-polyfills.js:1243
Evaluating http://localhost:3000/angular2/http
Error loading http://localhost:3000/app/main.js

I'm guessing something is not compiling right but I am new to Angular , new to Typescript , new to Node -- Basically I could really use some help here.

Can anyone tell me what is wrong, more importantly WHY it is wrong and how I can fix it and load some JSON to play with.

Thank you all in advance :)

Answer 1

I think that you forgot to include the http.dev.js file for the HTTP module of Angular2 into your main HTML file.

<script src="node_modules/angular2/bundles/http.dev.js"></script>

The error is the consequence of a 404 error when SystemJS tries to load this module.

Moreover you need to include HTTP providers when bootstrapping your application:

import {HTTP_PROVIDERS} from 'angular2/http';
(...)

bootstrap(AppComponent, [ HTTP_PROVIDERS ]);