Angular2 Http error

Question

I'm starting learning Angular2 by following the quickstart they provide in their page, and now I'm trying to make some Http requests. But whenever I bootstrap the component, Chrome keeps giving me this errors:

Uncaught SyntaxError: Unexpected token <         http:1
Uncaught SyntaxError: Unexpected token <         angular2-polyfills.js:138
   Evaluating http://localhost:3000/angular2/http
   Error loading http://localhost:3000/app/boot.js

This is the component:

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

@Component({
  selector: 'users',
  providers: [HTTP_PROVIDERS],
  templateUrl: 'app/views/users.html'
})
export class UsersComponent {

  people: Object[];
  constructor(http: Http) {
    http.get('http://192.168.56.101/api/test').subscribe(res => {
      this.people = res.json();
      console.log(this.people);
    });
  }
}

And the bootstrapping:

import {bootstrap}    from 'angular2/platform/browser'
import {UsersComponent} from './components/users'

bootstrap(UsersComponent, [HTTP_PROVIDERS]);

The view is only {{people}}.

TypeScript is compiling OK. I don't even know what's failing!

See http://stackoverflow.com/a/34402203/4933038 – Eric Martinez Dec 25 '15 at 22:23 — Eric Martinez, Dec 25 '15 at 22:23

score 26 · Accepted Answer · answered Dec 28 '15 at 14:30

26

The documentation is lacking on that part. Router and Http need to be added to the index.html. Easy mistake to make

answered Dec 28 '15 at 14:30

mgamsjager

424
4
11

1

quick note, the script tags are: – colbyJax May 13 '16 at 13:17

score 7 · Answer 2 · answered Dec 26 '15 at 00:14

7

First, if you injected provider on bootstrap, you don't have to do it again in component.

Second, did you included http.js in your index.html?

And third, you have an error in your code. There should be this.http.get() not http.get()

answered Dec 26 '15 at 00:14

Eggy

4,052
7
23
39

score 1 · Answer 3 · edited Apr 28 '16 at 19:13

in bootstraping you do not have to import the HTTP_PROVIDERS dependencies. so try:-

import {HTTP_PROVIDERS}    from 'angular2/http';
import {bootstrap}    from 'angular2/platform/browser'
import {UsersComponent} from './components/users'

bootstrap(UsersComponent, [HTTP_PROVIDERS]);

and in index file you need to add :-

<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.11/http.dev.js"></script>

for routing and http

Angular2 Http error

3 Answers3