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

Question

I am trying to run a simple HTTP request in Angular and am in the following error:

angular2.dev.js: 23941 Error: uncleanness (in the promise): EXCLUSION: Error creating AlbumListComponent !. ORIGINAL EXCEPTION: TypeError: backend.createConnection is not a function

To simplify, I broke the HTTP function to its easiest removal of the service and simply accessed the HTTP and Observable service directly:

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 code (and http.dev.js included in the script list):

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,
]);

I am either getting the error described or errors regarding missing providers (e.g. 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 is deprecated from 2.0.

Instead, you can use something like this:

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

and in your decorator:

imports:[ BrowserModule, HttpModule ]

Note. Be sure to remove Http from suppliers