Menu
I am trying to get a json file using the Http class in Angular 2. I followed the example on the Angular 2 homepage: https://angular.io/docs/js/latest/api/http/Http-class.html. However, I am getting the error message below. I am using Angular 2.0.0-alpha.37, traceur 0.0.91, systemjs 0.16.11, es6-module-loader 0.16.6 and typescript 1.6.2. Any ideas on what might be wrong here?
app.ts
///<reference path="typings/angular2/angular2.d.ts"/>
///<reference path="typings/angular2/http.d.ts"/>
import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';
@Component({
selector: 'myApp',
viewBindings: [HTTP_BINDINGS]
})
@View({
templateUrl: 'myapp.html'
})
class MyComponent {
data: Object;
constructor(http: Http) {
http.get('data.json').toRx().map(res => res.json()).subscribe(data => this.data = data);
}
}
bootstrap(MyComponent);
index.html
<!DOCTYPE html>
<html>
<head>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="../node_modules/angular2/bundles/http.dev.js"></script>
<script src="../node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
</head>
<body>
<myApp></myApp>
<script>
System.import('app');
</script>
</body>
</html>
Result
EXCEPTION: Error during instantiation of MyComponent!.
EXCEPTION: Error during instantiation of MyComponent!.
ORIGINAL EXCEPTION: TypeError: Rx.Subject is not a function
ORIGINAL STACKTRACE:
TypeError: Rx.Subject is not a function
at new EventEmitter (angular2.dev.js:22672)
at new XHRConnection (http.dev.js:7474)
at XHRBackend.createConnection (http.dev.js:7519)
at httpRequest (http.dev.js:7291)
at Http.get (http.dev.js:7369)
at new MyComponent (:8080/src/app.js:19)
at angular2.dev.js:8937
at Injector._proto._instantiate (angular2.dev.js:28045)
at Injector._proto._new (angular2.dev.js:27985)
at InjectorInlineStrategy.protoStrategy.instantiateBinding (angular2.dev.js:27774)
ERROR CONTEXT:
_Context
EXCEPTION: TypeError: Cannot read property 'location' of undefined
EXCEPTION: TypeError: Cannot read property 'location' of undefined
STACKTRACE:
TypeError: Cannot read property 'location' of undefined
at angular2.dev.js:27298
at Zone.run (angular2.dev.js:136)
at Zone.run (angular2.dev.js:16593)
at zoneBoundFn (angular2.dev.js:109)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1419)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1431)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1402)
at angular2.dev.js:187
at microtask (angular2.dev.js:16619)
at Zone.run (angular2.dev.js:136)
EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
EXCEPTION: TypeError: Cannot read property 'hostView' of undefined
STACKTRACE:
TypeError: Cannot read property 'hostView' of undefined
at zone.run.tick (angular2.dev.js:27331)
at Zone.run (angular2.dev.js:136)
at Zone.run (angular2.dev.js:16593)
at zoneBoundFn (angular2.dev.js:109)
at lib$es6$promise$$internal$$tryCatch (angular2.dev.js:1419)
at lib$es6$promise$$internal$$invokeCallback (angular2.dev.js:1431)
at lib$es6$promise$$internal$$publish (angular2.dev.js:1402)
at angular2.dev.js:187
at microtask (angular2.dev.js:16619)
at Zone.run (angular2.dev.js:136)
413
get() request method. HttpClient. get() method is an asynchronous method that performs an HTTP get request in Angular applications and returns an Observable. And that Observable emits the requested data when the response is received from the server.
The AngularJS $http service makes a request to the server, and returns a response.
As of Angular2 is in beta now so i feel to answer this question with some changes according to angular2 beta. so here is the list of some changes which is must to follow :
this
import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';
should be changed to:
import {Component, View} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';
for more information regarding imports see here List of all imports in angular2 as of beta.
Cannot find module 'angular2/angular2' .
viewBindings: [HTTP_BINDINGS] :-
HTTP_BINDINGS is changed to HTTP_PROVIDERS.
It would be better if we provide all basic binding at the time of bootstraping our app.like this
bootstrap(MyComponent,[HTTP_PROVIDERS]);
No need to provide extra @View annotation while all the functionality provided by @Component itself. ignore this:
@View({
templateUrl: 'myapp.html'
})
use this:
@Component({
selector: 'myApp',
templateUrl: 'myapp.html'
})
RxJs methods i.e .map and .subscribe . .map method accepts Observable object and transform into our desired form like text(), Json() as per need read out here https://angular.io/docs/js/latest/api/http/Response-class.html . class MyComponent {
data: Object;
constructor(private http: Http) {
http.get('data.json')
.map(res => res.json())
.subscribe(data => this.data = data,
err => console.log(err),
() => console.log('Completed'));
}
}
for More Information regarding HTTP service in Angular2 read out these answers too.
76
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
