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 :)

Check your Devtools Network tab for errors. Unexpected token < is most commonly caused by wrong link, for example if your server returns some html file instead of json you wanted... — Sasxa
– Sasxa, Commented Feb 16, 2016 at 13:29

Thierry Templier · Accepted Answer · 2016-02-16 15:15:01Z

4

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 ]);

edited Feb 16, 2016 at 15:15

answered Feb 16, 2016 at 13:33

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bas Over a year ago

You forgot the angular2 part <script src="node_modules/angular2/bundles/http.js"></script>

popClingwrap Over a year ago

This cleared up the initial error but triggered more saying providers were missing for ConnectionBackend and RequestOptions. I added these and now am faced with

EXCEPTION: Cannot resolve all parameters for 'RequestOptions'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'RequestOptions' is decorated with Injectable.

I'm not even trying to make a request yet, just get the parts loaded! Feels like I'm missing something here. Any thoughts?

Thierry Templier Over a year ago

You need to specify HTTP_PROVIDERS when bootstrapping your application. I updated my answer ;-)

popClingwrap Over a year ago

Awesome. It seems to be working now, thank you. All the examples I've seen just talk about the actual method of making requests once everything is plugged in but the whole stage of bootstrapping and configuring is bit of a mystery still. I'm hoping it will all just fall into place as I play around more. Anyway, thanks again, I really appreciate the help.

Collectives™ on Stack Overflow

Error when using trying to use angular2/Http

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related