Angular2は動作しないカスタムHTTPを提供します

Question

http 401,403、および500応答をキャプチャするためのグローバルな領域が必要です。私はいくつかのチュートリアルを見て、httpを拡張する方法を試しました。ここにここに私のカスタムHTTP（主にオンラインからコピー）

import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response, Headers} from '@angular/http'; 
import { Router} from '@angular/router'; 
import { Injectable} from '@angular/core'; 
import { Observable} from 'rxjs/Rx'; 

@Injectable() 


export class CustomHttp extends Http { 

    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router : Router) { 
     super(backend, defaultOptions); 
    } 

    request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.request(url, options)); 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.get(url, options)); 
    } 

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

    put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.put(url, body, this.getRequestOptionArgs(options))); 
    } 

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> { 
     return this.intercept(super.delete(url, options)); 
    } 

    getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs { 
     if (options == null) { 
      options = new RequestOptions(); 
     } 
     if (options.headers == null) { 
      options.headers = new Headers(); 
     } 
     options.headers.append('Content-Type', 'application/json'); 
     return options; 
    } 

    intercept(observable: Observable<Response>): Observable<Response> { 
     return observable.catch((err, source) => { 
      console.log('CustomHttp Error status: ' + err.status); 
      return Observable.throw(err); 
     }); 
    } 

} 

は、私は私のアプリをブートストラップし、私の実装をデフォルトのHTTPを交換しようとする方法ですされていない：

import { bootstrap } from '@angular/platform-browser-dynamic'; 
import { AppComponent } from './app.component'; 
import { HTTP_PROVIDERS, Http, XHRBackend, RequestOptions} from '@angular/http'; 
import { ROUTER_DIRECTIVES, Router } from '@angular/router'; 
import { APP_ROUTER_PROVIDERS } from './app.routes'; 
import { provide, PLATFORM_DIRECTIVES} from '@angular/core'; 
import { LocationStrategy, HashLocationStrategy } from '@angular/common'; 
import { CustomHttp } from './utils/http/customhttp'; 


    bootstrap(AppComponent, [ 
     APP_ROUTER_PROVIDERS, 
     HTTP_PROVIDERS, 
     provide(LocationStrategy, { useClass: HashLocationStrategy }), 
     provide(PLATFORM_DIRECTIVES, { useValue: [ROUTER_DIRECTIVES], multi: true }), 
     provide(Http, { 
      useFactory: (xhrBackend: XHRBackend, requestOptions: RequestOptions, router: Router) => new CustomHttp(xhrBackend, requestOptions, router), 
      deps: [XHRBackend, RequestOptions, Router] 
     }), 
    ]); 

エラーをコンパイルするが、私はしようとすると、私の実装ではなく、デフォルトのプロバイダを使用して、いくつかのhttpリクエストを作成します。私は意図的に500を返すwebapiエンドポイントを呼び出すので、私はこれを知っていると私のcatch節に設定し、ログステートメントを記述しないでください。

"dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.1", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.4", 

    "systemjs": "0.19.27", 
    "core-js": "^2.4.0", 
    "reflect-metadata": "^0.1.3", 
    "rxjs": "5.0.0-beta.6", 
    "zone.js": "^0.6.12", 

    "lodash": "4.13.1", 
    "angular2-in-memory-web-api": "0.0.14", 
    "bootstrap": "^3.3.6" 
    } 

私はここで何糊をしないのです：

は、ここに私のjs依存関係がありますか？

Answer 1

一部のコンポーネントにHTTP_PROVIDERSまたはHttpが指定されていないことを確認してください。そうでない場合は、代わりに使用することもできます（正確な場所によって異なります）。

Answer 2

これは私のために働いた。基本サービスのURLを設定する必要がありました。私は自分のローカルで実行しているときとprodサーバーに展開するときに環境を検出する必要があります。

@Injectable() 
export class HttpService extends Http { 

    static SERVICE_BASE_URL = ''; 

    constructor(backend: XHRBackend, options: RequestOptions) { 
    super(backend, options); 

    if (/http:\/\/(localhost|127.0.0.1)/.test(window.location.href)) { 
     HttpService.SERVICE_BASE_URL = 'http://localhost:8000'; 
    } else { 
     HttpService.SERVICE_BASE_URL = 'http://mywebsite.com/api'; 
    } 
    } 

    get(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.get(this.toTargetUrl(url), options); 
    } 

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

    put(url: string, body: any, options?: RequestOptionsArgs): Observable<Response> { 
    return super.put(this.toTargetUrl(url), body, options); 
    } 

    delete(url: string, options?: RequestOptionsArgs): Observable<Response> { 
    return super.delete(this.toTargetUrl(url), options); 
    } 

    toTargetUrl(url: string): string { 
    return url = /^https?:/.test(url) ? url : HttpService.SERVICE_BASE_URL + url; 
    } 
} 

は、これは私があなたにも `Http`または` HTTP_PROVIDERS`は `プロバイダに追加しましたapp.module.ts

providers: [ 
    { 
     provide: Http, 
     useFactory: HttpFactory, 
     deps: [XHRBackend, RequestOptions] 
    }, 
    UtilsProvider, 
    LocalStorageProvider 
] 

export function HttpFactory(backend: XHRBackend, options: RequestOptions) { 
    return new HttpService(backend, options); 
}