Angular2 beta - bootstrapping HTTP_PROVIDERS - "Unexpected Token <"

Question

Starting with the 5 minute quick start I've been playing around the angular2 beta and have run across a problem that has me stumped.

Here is a dumbed down version that shows the problem I have. First here a hello world app working perfectly.

package.json

{
   "name": "...",
   "version": "0.0.1",
   "description": "...",
   "author": {
   "name": "...",
   "email": "..."
    },
    "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
    },
    "license": "ISC",
    "dependencies": {
    "angular2": "2.0.0-beta.0",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "^0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "^0.5.10"
    },
    "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
    }
}

index.html

<head>
<title>Title</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="styles.css" rel="stylesheet" />

<!-- 1. Load libraries -->
<script src="node_modules/es6-shim/es6-shim.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js">    </script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>


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

</head>

<!-- 3. Display the application -->
<body>
    <my-app></my-app>
</body>

app/boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'

bootstrap(AppComponent);

app/app.component.ts

import {Component, View} from 'angular2/core';
import {RegisterFormComponent} from './accounts/register-form.component'
@Component({
    selector: 'my-app',
})
@View({
    template: 'hello world',
})
export class AppComponent {
}

I evntually want to call my Web Api service so I am trying to follow the docs for Http, I update boot.ts as follows:

new app/boot.ts

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import {AccountService} from './accounts/account.service'
import {HTTP_PROVIDERS} from 'angular2/http';

bootstrap(AppComponent, [HTTP_PROVIDERS]);

And here's where things choke.

Chrome gives me:

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

It also fails if I try to set the HTTP_PROVIDERS as a viewProvider on my component.

Has anyone else had any luck getting Http to inject properly in the angular2 beta?

Visual Studio 2015
Node.JS & Node.JS tools for visual studio
Using 'NPM start' to compile and run

Is this a dup of http://stackoverflow.com/questions/34387174 ? — Günter Zöchbauer, Dec 21 '15 at 17:40
@GünterZöchbauer kind of. In this case he's missing the http bundle, e.g `` — Eric Martinez, Dec 21 '15 at 17:42
Similar error, but a different cause. I have a working app that breaks when I bootstrap HTTP_PROVIDERS. The solution to his problem was to fix the System.Config call in index.html which isn't a problem in my case since everything works perfectly until I bootstrap HTTP_PROVIDERS — Cosmosis, Dec 21 '15 at 17:44
@EricMartinez You're my hero. I was looking at this for ages yesterday and knew that it was something stupid. If you submit an answer I will accept it. I guess I was hoping that angular would take care of the include for me? What's the point of the import {HTTP_PROVIDERS} statement if it doesn't automatically include the JS? lol :) — Cosmosis, Dec 21 '15 at 17:49
@Cosmosis To answer your question, Angular2 uses the future es6-module importing format. Eventually, browsers *will* support the `import` syntax natively. Until then a polyfill such as system.js is necessary. — Evan Plaice, Jan 25 '16 at 18:28

score 52 · Accepted Answer · edited Nov 08 '17 at 10:45

52

This error occurs when you try to import something that is not being included in your HTML when using SystemJS. Module bundlers like Webpack handle all that for you.

For your case you have to add the Http bundle that's a separated bundle, for example

<script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>

You'll see this same error when trying to use the router and you forgot to add the router bundle.

Check the difference between these two configurations from @pkozlowski-opensource's repos

Using SystemJS : For this case he would've to add http bundle, or router bundle if he wanted to use them.
Using Webpack : In this case Webpack bundles everything in that bundle.js file for you.

Glad it helped.

edited Nov 08 '17 at 10:45

luke

3,435
33
41

answered Dec 21 '15 at 18:35

Eric Martinez

31,277
9
92
91

1

I'm finding JSPM is also working well for bundling angular2 modules. – brando Dec 25 '15 at 22:33
@brando Unless you want to use it as a separate standalone bundle, JSPM already provides angular2 `jspm install angular2`. – Evan Plaice Jan 25 '16 at 18:26
Sigh, this error message should be better than this. – allenhwkim Jul 13 '16 at 03:56

score 11 · Answer 2 · edited Feb 02 '16 at 22:59

11

If you're using npm, include a script tag with the http reference to your local installation:

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

edited Feb 02 '16 at 22:59

filoxo

8,132
3
33
38

answered Jan 27 '16 at 16:06

E. Fortes

1,338
12
12

1

This should be the accepted answer as of 3/2016. If anyone else is having this issue, this is the fix. – Matthew Pitts Mar 11 '16 at 23:43

Angular2 beta - bootstrapping HTTP_PROVIDERS - "Unexpected Token <"

2 Answers2

Linked