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] 
     }), 
    ]); 

The нет ошибки компиляции, но когда я пытаюсь чтобы некоторые HTTP-запросы использовали его по умолчанию, а не мою реализацию. Я знаю это, потому что я целенаправленно называю конечную точку webapi, которая возвращает 500 и не устанавливает в мое предложение catch и записывает оператор журнала.

Вот мои JS зависимостями:

"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" 
    } 

Что клей я здесь отсутствует?

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; 
    } 
} 

Это, как я настроил в 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); 
}