Angular 2 HTTP 请求：TypeError：backend.createConnection 不是函数答案

【问题标题】：Angular 2 HTTP Request: TypeError: backend.createConnection is not a functionAngular 2 HTTP 请求：TypeError：backend.createConnection 不是函数
【发布时间】：2016-04-10 11:48:34
【问题描述】：

我正在尝试在 Angular 中运行一个简单的 HTTP 请求并遇到以下错误：

angular2.dev.js:23941 错误：未捕获（承诺中）：异常：在 AlbumListComponent 实例化期间出错！。原始异常：TypeError：backend.createConnection 不是函数

为简化起见，我将 HTTP 功能分解为最简单的移除服务并直接访问 HTTP 服务和 Observable：

import {Component} from 'angular2/core';
import {Album} from './album';
import {AppState} from './appstate'; 
import {Observable}     from 'rxjs/Observable';

import {Http}    from 'angular2/http';

@Component({
    selector: 'album-list',
    templateUrl: 'Views/albumList.html',
    providers: [AlbumService, Http, Response]        
})
export class AlbumListComponent {
    albums: Array<Album> = [];
    title: string = "Album Listing";
    errorMessage: string;


    constructor(public state: AppState,
        public albumService: AlbumService,
        public http: Http) {

        console.log('AlbumList Constructor' +  this.title);
        state.activeTab = "albums";
        debugger;

        http.get(state.urls.albums)
            .map(res => {
                debugger;
                return res.json()
            })
            //.catch(error => {
            //    debugger;
            //    console.error(error);
            //    return Observable.throw(error.json().error || 'Server error');
            //})
            .subscribe(albums => this.albums = albums)           

        //this.getAlbums();  // service removed to simplify
    }


}

引导代码（并且 http.dev.js 包含在脚本列表中）：

import {bootstrap}    from 'angular2/platform/browser';
import {Albumviewer} from './albumviewer.component';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppState} from './appstate'
import 'rxjs/Rx';

bootstrap(Albumviewer,[
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
]);

我要么收到描述的错误，要么收到有关缺少提供程序的错误（例如 ConnectionBackend）。

如果我删除 Http 访问代码，应用程序运行正常。有了那里的代码，它就会爆炸。我不知道在这里看什么 - 因为错误消息显然是指 HTTP 服务使用的子组件。

【问题讨论】：

标签： angular angular2-services

【解决方案1】：

更新

在 Angular2 final 中将 HttpModule 添加到 @NgModule() 的导入中也是如此

原创

您没有显示您的bootstrap(...)，但它可能不包含HTTP_PROVIDERS

bootstrap(AppComponent, [HTTP_PROVIDERS]);

HTTP_PROVIDERS 包含 Http 及其所有依赖项。如果您将HTTP_PROVIDERS 添加到bootstrap()，则无需将Http 添加到组件上的提供程序，因为这样它就可以在全球范围内使用。

如果你想注入它，你仍然需要导入它。

【讨论】：

我确实在引导代码中注册了 HTTP_PROVIDERS，所以这不是问题所在。但你确实为我指明了正确的方向。问题原来是显式添加 Http 提供程序 - 如果我删除 Http 提供程序引用，则上面的代码开始工作。
我可以确认从提供程序中删除 Http 可以解决此问题，该问题仅发生在调用“真实”假后端的规范测试中:) (ng 2.0.0)

【解决方案2】：

HTTP_PROVIDERS 已从 2.0 中弃用。

你可以改用这样的东西：

import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

在你的装饰器中：

imports:[ BrowserModule, HttpModule ]

注意：确保从提供程序中删除 Http

【讨论】：

【解决方案3】：

刚刚在 RC5 中遇到了这个问题，在我的情况下要解决：

在组件中（{ServiceName} 是 HTTP 服务的名称）：

// import HTTP_PROVIDERS at the top:
import { HTTP_PROVIDERS } from '@angular/http';

// in the @Component decorator
providers: [ {ServiceName}, HTTP_PROVIDERS ]

在 app.module.ts 中：

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

// in the @NgModule decorator
providers: [
    ConnectionBackend,
    HTTP_PROVIDERS,
    ...
]

希望这可以帮助任何人在 RC5 中解决此问题

【讨论】：