Angular2/http 异常没有 ConnectionBackend答案

【问题标题】：Angular2/http Exception no ConnectionBackendAngular2/http 异常没有 ConnectionBackend
【发布时间】：2016-02-23 19:51:29
【问题描述】：

我尝试使用 angular2 http 请求，但出现以下错误： [错误] 例外：没有 ConnectionBackend 的提供者！ (AppComponent -> Http -> ConnectionBackend)

我设置了一个有同样问题的准系统应用程序，但不知道是什么原因造成的。

提前致谢

app.component.ts

import {Component} from 'angular2/core';
import {Http, Headers} from 'angular2/http';

@Component({
  selector: 'app',
  template: `
    <button (click)="getEmployee()">Get</button>
    <p>{{employee.email}}</p>

  `,
  providers: [Http]
})

export class AppComponent {
  employee: {"email": "bob"};
  http: Http;

  constructor(http:Http){
    this.http = http;
  }

  getEmployee(){
    this.http.get('localhost:8080/employee-rates?id=0')
      .map(response => response.json()).subscribe(result => this.employee = result);
  }


}

main.ts

import {AppComponent} from './app.component';
import {bootstrap} from 'angular2/platform/browser';
import {HTTP_PROVIDERS, HTTP_BINDINGS} from 'angular2/http';

bootstrap(AppComponent, [
  HTTP_PROVIDERS, HTTP_BINDINGS
]);

index.html

<html>

  <head>
    <base href="/">
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="js/es6-shim/es6-shim.min.js"></script>
    <script src="js/systemjs/dist/system-polyfills.js"></script>

    <script src="js/angular2/bundles/angular2-polyfills.js"></script>
    <script src="js/systemjs/dist/system.src.js"></script>
    <script src="js/rxjs/bundles/Rx.js"></script>
    <script src="js/angular2/bundles/angular2.dev.js"></script>
    <script src="js/angular2/bundles/http.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <div class='small-12'>
      <app>Loading...</app>
    </div>
  </body>

</html>

【问题讨论】：

[这是一个新答案]stackoverflow.com/questions/40098413/…

标签： http service angular

【解决方案1】：

src/main.ts

import { HTTP_PROVIDERS, ConnectionBackend } from '@angular/http';

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ConnectionBackend
]);

使用 angular-cli@1.0.0-beta.10 和 angular@2.0.0-rc.4

【讨论】：

在最终产品版本中有什么想法吗？

【解决方案2】：

从 Angular 2 RC5 版本开始，在你的 NgModule 文件中，添加：

import { HttpModule } from '@angular/http';

@NgModule({
    imports:      [
        ...
        HttpModule ]

【讨论】：

为什么导入而不提供？
@Markus，因为HttpModule 是一个模块（不是服务），它必须被导入。
是的。这就是方法。我想通了。

【解决方案3】：

从您的代码中删除 HTTP_BINDINGS。它们已被弃用并引用 HTTP_PROVIDERS，因此就像您使用了两次提供程序一样。

bootstrap(AppComponent, [HTTP_PROVIDERS]);

您的组件中也不需要providers: [Http]，因为您在引导程序中注入了HTTP_PROVIDERS。将其添加到组件的提供者将创建该服务的新实例。

@Component({
  providers: []
})

【讨论】：

刚刚测试了这个，不幸的是问题仍然存在。
没问题。欢迎来到 SO！
HTTP_PROVIDERS 不再是东西