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

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

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

To simplify I broke down the HTTP functionality to its simplest removing the service and just directly accessing the HTTP service and 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 code (and http.dev.js is 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 either get the described error, or errors about missing providers (like ConnectionBackend).

If I remove the Http access code the app runs OK. With the code in there it bombs. I have no idea what to look at here – as the error message clearly refers to a child component used by the HTTP service.

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

update

In Angular2 final adding HttpModule to imports of @NgModule() does the same

original

You don’t show your bootstrap(...) but it probably doesn’t contain HTTP_PROVIDERS

bootstrap(AppComponent, [HTTP_PROVIDERS]);

HTTP_PROVIDERS contains Http and all its dependencies. If you add HTTP_PROVIDERS to bootstrap() there is no need to add Http to providers on components because this way it is made globally available.

You still need to import it if you want to inject it though.

Jason
Guest

HTTP_PROVIDERS is deprecated from 2.0.

You can use something like this instead:

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

and in your decorator:

imports:[ BrowserModule, HttpModule ]

Note: Make sure to remove Http from providers

Jason
Guest

Just had this issue in RC5, to resolve in my case:

In Component (Where {ServiceName} is the name of the HTTP Service):

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

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

In app.module.ts:

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

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

Hope this helps anyone getting this issue in RC5