2016-04-10 3 views
4

Я пытаюсь запустить простой запрос HTTP в Угловое и бегу в следующее сообщение об ошибке:Угловое 2 HTTP запроса: TypeError: backend.createConnection не является функцией

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.

ответ

3

обновление

В Angular2 финале добавления HttpModule к импорту @NgModule() делаете то же

оригинального

Вы не показываете ваш bootstrap(...), но это, вероятно, не содержит HTTP_PROVIDERS

bootstrap(AppComponent, [HTTP_PROVIDERS]); 

HTTP_PROVIDERS содержит Http и все его зависимости. Если вы добавите HTTP_PROVIDERS в bootstrap(), нет необходимости добавлять Http поставщикам на компоненты, потому что таким образом он сделан в глобальном масштабе.

Вам все равно нужно импортировать его, если вы хотите его ввести.

+3

я есть HTTP_PROVIDERS, зарегистрированный в коде начальной загрузки, так что это не совсем проблема. Но вы указали мне в правильном направлении. Проблема заключалась в том, что явное добавление поставщика Http - если я удалю ссылку на Http-провайдер, то код выше начнет работать. –

+0

Я могу подтвердить, что удаление Http из провайдеров устраняет эту проблему, которая произошла только в тесте spec, который вызывает «реальный» поддельный backend :) (ng 2.0.0) – Guntram

1

Просто был этот вопрос в RC5, чтобы решить в моем случае:

В компоненте (Где {ServiceName} это название HTTP Service):

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

1

HTTP_PROVIDERS устарел от 2.0.

Вы можете использовать что-то вроде этого, вместо:

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

и в вашем декоратор:

imports:[ BrowserModule, HttpModule ] 

Примечание: Убедитесь удалить Http от поставщиков

Смежные вопросы