Angular2/http 异常没有 ConnectionBackend [英] Angular2/http Exception no ConnectionBackend

查看：17 发布时间：2021/12/27 21:36:06 http service angular

本文介绍了Angular2/http 异常没有 ConnectionBackend的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

提前致谢

app.component.ts

从'angular2/core'导入{Component}；从 'angular2/http' 导入 {Http, Headers}；@零件({选择器:'应用'，模板:`<button(点击)="getEmployee()">获取</button><p>{{employee.email}}</p>`，提供者:[Http]})导出类 AppComponent {员工:{电子邮件":鲍勃"}；http:http；构造函数(http:http){this.http = http;}获取员工(){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';从 'angular2/platform/browser' 导入 {bootstrap}；从 'angular2/http' 导入 {HTTP_PROVIDERS, HTTP_BINDINGS}；引导程序(应用程序组件，[HTTP_PROVIDERS、HTTP_BINDINGS]);

index.html

<头><base href="/"><title>测试</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.配置SystemJS--><脚本>系统配置({包:{应用程序: {格式:'注册'，默认扩展名:'js'}}});System.import('app/main').then(null, console.error.bind(console));<!-- 3. 显示应用程序--><身体>
<app>正在加载...</app>

解决方案

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

bootstrap(AppComponent, [HTTP_PROVIDERS]);

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

@Component({提供者:[]})

I attempting to use an angular2 http request, but I am getting the following error: [Error] EXCEPTION: No provider for ConnectionBackend! (AppComponent -> Http -> ConnectionBackend)

I have setup a barebones app which has the same problem, and am at a loss to what is causing it.

Thanks in advance

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>

解决方案

Remove HTTP_BINDINGS from your code. They are deprecated and reference HTTP_PROVIDERS, so it's like you're using providers twice.

bootstrap(AppComponent, [HTTP_PROVIDERS]);

Also you don't need providers: [Http] in your component, since you injected HTTP_PROVIDERS in bootstrap. Adding it to the component's providers will create new instance of the service.

@Component({
  providers: []
})

这篇关于Angular2/http 异常没有 ConnectionBackend的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

Angular2/http 异常没有 ConnectionBackend [英] Angular2/http Exception no ConnectionBackend

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

Angular2/http 异常没有 ConnectionBackend [英] Angular2/http Exception no ConnectionBackend

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭