Angular 2 HTTP Request: TypeError: backend.createConnection is not a function

Question

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

angular2.dev.js:23941 Error: Uncaught (in promise): EXCEPTION: Error during instantiation of AlbumListComponent!. ORIGINAL EXCEPTION: TypeError: backend.createConnection is not a function

为了简化，我将 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
    }


}

Bootstrap 代码（并且 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 服务使用的子组件。

Answer 1

更新

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

原创

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

bootstrap(AppComponent, [HTTP_PROVIDERS]);

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

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

Answer 2

刚在 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 中解决这个问题

Answer 3

HTTP_PROVIDERS 已从 2.0 中弃用。

您可以改用这样的东西：

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

在你的装饰器中：

imports:[ BrowserModule, HttpModule ]

注意：确保从提供程序

中删除Http

Angular 2 HTTP Request: TypeError: backend.createConnection is not a function

Angular 2 HTTP Request: TypeError: backend.createConnection is not a function

angular

angular2-services