Menu
I just start hacking Angular 2 and now I am trying to develop my first 'real world' app. Its meant to retrieve data from a restfull webservice, so I wrote this code:
boot.ts:
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './component/app.component'
import {Http, Headers} from 'angular2/http';
bootstrap(AppComponent);
app.component.ts:
import {Component} from 'angular2/core';
import {AuthComponent} from './auth.component';
@Component({
selector: 'my-app',
templateUrl: 'app/template/my-app.html',
styleUrls: ['app/style/my-app.css'],
directives: [AuthComponent]
})
export class AppComponent {
}
auth.service.ts:
import {Injectable} from 'angular2/core';
import {Http, Headers, HTTP_PROVIDERS} from 'angular2/http';
import {toPromise} from 'rxjs/operator/toPromise';
import {Credentials} from '../model/credentials';
@Injectable()
export class AuthService {
headers : Headers;
http: Http;
constructor(headers: Headers, http: Http){
console.log('CHAMOU CONSTRUTOR SERVICE');
this.headers = headers;
this.http = http;
this.headers.append('Content-Type', 'application/json');
}
}
index.html:
<html>
<head>
<title>MegaSíndico</title>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<!-- 1. Load libraries -->
<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>Loading...</my-app>
</body>
</html>
I am getting this weird syntax error on my console:
Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/http
Error loading http://localhost:3000/app/boot.js
Its really weird because when I delete the constructor of the service layer it works and my html is rendered on the browser.
945
Based on the information provided, whatever module loader you are using is trying to load http://localhost:3000/angular2/http, and probably your Web server is returning a 404 with an HTML document body, which the module loader tries to evaluate as JavaScript and fails. If you look at the network tab of your browser you can confirm this is the case.
Since you haven’t said which module loader you are trying to use it’s not possible to say what you need to do to configure it correctly, but basically: your module loader is not configured correctly and isn’t applying proper path/file extension mapping to your imports. It needs to be (at least) adding a .js to imported module paths to load from the correct URL on the server.
167
Do you include the http.dev.js file from the Angular2 distribution into the main HTML page of your application?
Moreover you need to add HTTP_PROVIDERS with the second parameter of the bootstrap function:
bootstrap(AppComponent, [ HTTP_PROVIDERS ]);
Hope it helps you, Thierry
26
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
