Http Angular2 çocuk sınıfı hata atar

Question

Kimlik doğrulama başlıklarıyla uğraşıyorum, bir çözüm, 'angular2/http' adresinden Http genişletir ve varsayılan auth başlıklarını ekler. Ben github aynı kodu kullanıyorum, ancak EXCEPTION: TypeError: backend.createConnection is not a function in [null] code here atar. Ama angular2/http'a döndüğümde, her şey iyi çalışıyor. Bu istisna mesajıyla ilgili herhangi bir bilgi bulamıyorum. Yardım için teşekkürler!

Güncellemeler: Örnekle aynı şekilde kullanıyorum.

import {Injectable} from 'angular2/core'; 
// import {Http} from 'angular2/http'; 
import {Headers, Response} from 'angular2/http'; 
import {Http} from '../common/http'; 
import {Category} from '../model/category'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class CategoryService { 
    constructor(private http:Http) {} 
    getCategories() { 
     return this.http.get('http://www.google.com') 
     .map(res => res.json()); 
    } 

    getCategory(id: string) { 
     return this.http.get('http://localhost:8080/api/category/'+id) 
     .map(res => res.json()); 
    } 
} 

Bu benim/commom olduğunu/http

import {Observable} from "rxjs/Observable"; 
import {Injectable} from "angular2/core"; 
import {Http as NgHttp, RequestOptionsArgs, RequestOptions, Headers, Response, ConnectionBackend} from "angular2/http"; 

const mergeAuthToken = (options:RequestOptionsArgs) => { 
    let newOptions = new RequestOptions({}).merge(options); 
    let newHeaders = new Headers(newOptions.headers); 
    let access_token = localStorage.getItem('access_token'); 
    newHeaders.set('Authorization', 'bearer '+ access_token); 
    newHeaders.set('Accept', 'application/json'); 
    newHeaders.set('Content-Type', 'application/json'); 
    newOptions.headers = newHeaders; 
    return newOptions; 
}; 

@Injectable() 
export class Http extends NgHttp { 
    constructor(_backend: ConnectionBackend, _defaultOptions: RequestOptions) { 
     super(_backend, _defaultOptions); 
    } 
    get(url:string, options?:RequestOptionsArgs):Observable<Response> { 
     return super.get(url, mergeAuthToken(options)); 
    } 

    post(url:string, body:string, options?:RequestOptionsArgs):Observable<Response> { 
    return super.post(url, body, mergeAuthToken(options)); 
    }... 
} 

Bu benim app.component parçasıdır:: Bu benim hizmettir

import { Http } from '../common/http'; 
import { SecurityRouterOutlet } from '../router/securityRouter'; 
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router'; 
import {HTTP_PROVIDERS, ConnectionBackend } from 'angular2/http'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/view/app.component.html', 
    styleUrls: ['app/view/app.component.css'], 
    directives: [SecurityRouterOutlet, ROUTER_DIRECTIVES], 
    providers: [ 
     ROUTER_PROVIDERS, 
     HTTP_PROVIDERS, 
     CategoryService, 
     LoginService, 
     ConnectionBackend, 
     Http 
    ] 
}) 

daha kod detay gerekiyorsa

, Lütfen bana haber ver. Teşekkürler! @Thierry Templier önerildiği gibi

Update2, çok kategori servis ve app.component.ts olarak benim ortak/http dosyasında AuthHttp için HTTP değiştirmek, ancak bu yardımcı olmuyor.

istisna dolu yığın:

TypeError: backend.createConnection is not a function angular2.dev.js:23877 
    at httpRequest (http.dev.js:941) 
    at AuthHttp.Http.get (http.dev.js:980) 
    at AuthHttp.get (http.ts:24) 
    at CategoryService.getCategories (category.service.ts:16) 
    at DashboardComponent.ngOnInit (dashboard.component.ts:15) 
    at AbstractChangeDetector.ChangeDetector_HostDashboardComponent_0.detectChangesInRecordsInternal (viewFactory_HostDashboardComponent:21) 
    at AbstractChangeDetector.detectChangesInRecords (angular2.dev.js:9609) 
    at AbstractChangeDetector.runDetectChanges (angular2.dev.js:9592) 
    at AbstractChangeDetector._detectChangesContentChildren (angular2.dev.js:9665) 
    at AbstractChangeDetector.runDetectChanges (angular2.dev.js:9593) 

dashboard.component: Ben en son sürümünü kullanıyorum

import { Component, OnInit } from 'angular2/core'; 
import { Router } from 'angular2/router'; 
import { Category } from '../model/category'; 
import { CategoryService } from '../service/category.service'; 

@Component({ 
    selector: 'my-dashboard', 
    templateUrl: 'app/view/dashboard.component.html', 
    styleUrls: ['app/view/dashboard.component.css'] 
}) 
export class DashboardComponent implements OnInit { 
    categories: Category[] = []; 
    constructor(private _router: Router, private _categoryService: CategoryService) { } 
    ngOnInit() { 
    this._categoryService.getCategories().subscribe(
      data => { this.categories = data }, 
      err => console.error(err) 
    ); 
    } 
    gotoDetail(category: Category){ 
     let link = ['CategoryDetail', { id: category.id }]; 
     this._router.navigate(link); 
    } 
} 

:

{ 
    "name": "angular2quickstart", 
    "version": "1.0.0", 
    "scripts": { 
    "postinstall": "npm run typings install", 
    "tsc": "tsc", 
    "tsc:w": "tsc -w", 
    "lite": "lite-server", 
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ", 
    "typings" : "typings" 
}, 
    "license": "ISC", 
"dependencies": { 
    "angular2": "2.0.0-beta.13", 
    "systemjs": "0.19.25", 
    "es6-promise": "^3.0.2", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "0.1.3", 
    "rxjs": "5.0.0-beta.4", 
    "zone.js": "0.6.9" 
}, 
"devDependencies": { 
    "concurrently": "^2.0.0", 
    "lite-server": "^2.0.1", 
    "typescript": "^1.7.5", 
    "typings": "^0.7.12" 
    } 
} 

Answer 1

Sen useClass zaman kullanamazsınız ilişkili sağlayıcıyı tanımlarsınız ancak useFactory bu şekilde:

bootstrap(AppComponent, [ 
    HTTP_PROVIDERS, 
    provide(Http, { 
    useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions), 
    deps: [XHRBackend, RequestOptions] 
    }) 
]); 

Bu şekilde arka ucun enjekte edilmesini sağlayabilirsiniz.

Düzenleme

ben sorun size sınıfını tanımlamak yol olduğunu bulmak. Sen böyle bir şey denemelisiniz:

export class CustomHttp extends Http { 
    (...) 
} 

ve yukarıda açıklandığı gibi provide fonksiyonu ile kaydetmek.