【问题标题】：How to get a json file in Angular 2 using the Http class?如何使用 Http 类在 Angular 2 中获取 json 文件？
【发布时间】：2015-12-27 07:48:08
【问题描述】：

我正在尝试使用 Angular 2 中的 Http 类获取 json 文件。我按照 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 和 typescript 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)

【问题讨论】：

我相信你在引导时需要参考Http....bootstrap(MyComponent, [Http]);
您应该将您的 systemjs 更新到最新版本 0.18.* 和 remove es6-module-loader。除此之外，将您的配置基于一些工作设置like this one
感谢 Eric 的帮助。我更新了 systemjs 并扔掉了 es6-module-loader。我还在配置参数中添加了“defaultJSExtensions：true”。我不再收到任何错误。 :)

标签： typescript angular

【解决方案1】：

更新到 angular2 Beta

由于 Angular2 现在处于测试阶段，所以我觉得可以根据 angular2 beta 进行一些更改来回答这个问题。所以这里是一些必须遵循的更改列表：

angular2 的导入

这个

import {Component, View, bootstrap} from 'angular2/angular2';
import {Http, HTTP_BINDINGS} from 'angular2/http';

应该改为：

import {Component, View} from 'angular2/core';
import {Http, HTTP_PROVIDERS} from 'angular2/http';
import {bootstrap} from 'angular2/platform/browser';

有关进口的更多信息，请参见此处 angular2 测试版中所有导入的列表。

Cannot find module 'angular2/angular2'.

viewBindings: [HTTP_BINDINGS] :- HTTP_BINDINGS 更改为 HTTP_PROVIDERS。如果我们在引导我们的应用程序时提供所有基本绑定会更好。像这样

bootstrap(MyComponent,[HTTP_PROVIDERS]);
无需提供额外的@View 注释，而@Component 本身提供的所有功能。忽略这个：

@View({
    templateUrl: 'myapp.html'
  })

使用这个：

  @Component({
    selector: 'myApp',
    templateUrl: 'myapp.html'
  })

使用 HTTP 获取 JSON 文件。
首先，我们都知道 Angular2 是抛出 observable 对象，而不是像 angular 1.x 中的 promise。所以要处理 Observable Object，我们需要 RxJs 方法，即 .map and .subscribe 。 .map 方法接受 Observable 对象并根据需要在此处读取 https://angular.io/docs/js/latest/api/http/Response-class.html 转换为我们想要的形式，如 text()、Json()。

  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'));
    }
  }

有关 Angular2 中 HTTP 服务的更多信息，请阅读这些答案。

【讨论】：

你在代码示例中还有HTTP_BINDINGS change with: ...

【解决方案2】：

你需要引导[HTTP_BINDINGS]

改变这一行：

bootstrap(MyComponent);

到这个：

bootstrap(MyComponent,[HTTP_BINDINGS]);

【讨论】：

PS：但现在就像在测试版中一样，HTTP_BINDINGS 已更改为 HTTP_PROVIDERS。

【解决方案3】：

如果您想在 Angular 2 中使用 http get 方法读取 .json 文件，则取决于您使用构建工具。

如果你使用 angular-cli，那么你需要将 .json 文件放在 assets 文件夹中并尝试像这样读取该文件

http.get('<your file path inside assets folder>.json')

但是如果你使用 webpack，那么你需要将相同的 .json 文件放在公共文件夹中

http.get('<your file path inside assets folder>.json')

会有用的

【讨论】：

更新到 angular2 Beta

使用 HTTP 获取 JSON 文件。