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

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.

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.
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

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

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

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

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Related