Menu
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?
600
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
bundle.js file for you.Glad it helped.
102
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
