Как получить файл JSON в Angular 2 с помощью класса Http?
Я пытаюсь получить файл json, используя класс Http в Angular 2. Я последовал примеру на домашней странице Angular 2:https://angular.io/docs/js/latest/api/http/Http-class.html, Тем не менее, я получаю сообщение об ошибке ниже. Я использую Angular 2.0.0-alpha.37, traceur 0.0.91, systemjs 0.16.11, es6-module-loader 0.16.6 и машинописный текст 1.6.2. Есть идеи о том, что здесь может быть не так?
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>
Результат
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)