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

Question

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.

Günter Zöchbauer · Accepted Answer · 2016-09-23 13:40:31Z

3

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.

edited Sep 23, 2016 at 13:40

answered Apr 10, 2016 at 11:52

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rick Strahl Over a year ago

I did have HTTP_PROVIDERS registered in the bootstrap code, so that wasn't quite the issue. But you did point me in the right direction. The issue turned out to be adding the Http provider explicitly - if I remove the Http provider reference then the code above starts working.

Guntram Over a year ago

I can confirm that removing Http from the providers fixes this problem, which only occured in a spec test which calls a "real" fake backend :) (ng 2.0.0)

gradosevic · Accepted Answer · 2016-10-12 09:26:17Z

2

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

answered Oct 12, 2016 at 9:26

gradosevic

5,0562 gold badges39 silver badges52 bronze badges

Comments

Andy Mepham · Accepted Answer · 2016-08-18 15:51:38Z

0

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

edited Aug 18, 2016 at 15:51

answered Aug 18, 2016 at 14:56

Andy Mepham

828 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related