Injected Logger is undefined in Custom Http in angular2 - http

Question

I am trying to implement a global handler to manage HTTP errors in Angular2. Going through few reference: http://restlet.com/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/ and https://blog.tomasandtomas.com/angular-2-http-interceptors-7e2d74b7f14e#.nxgxijnqu , I made the following:
--------------------------------------------------------------------
// Logger service - which will be able to send the error to server or log to console
import { Http } from '#angular/http';
import { Injectable } from '#angular/core';
import { Response } from '#angular/http';
#Injectable()
export class ErrorLogService {
public logError(error: any): void {
// custom error handling here
console.log(error);
}
}
--------------------------------------------------------------------
// This is the Custom HTTP that extends Http module
import { Injectable } from '#angular/core';
import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs } from '#angular/http';
import { ErrorLogService } from '../ErrorHandling/error.log.service';
import { Observable } from 'rxjs/Rx';
#Injectable()
export class CustomHttp extends Http {
constructor(_backEnd: ConnectionBackend,
defaultOptions: RequestOptions, private errorLogService: ErrorLogService) {
super(_backEnd, defaultOptions);
}
get(url: string, options?: RequestOptionsArgs): Observable<any> {
return super.request(url, options)
.catch((error: any): any => {
this.errorLogService.logError(error);
return Observable.empty();
})
.finally(() => {
console.log('Done');
});
}
}
--------------------------------------------------------------------
// This is the service that call the api to get data.
import { Http, Response } from '#angular/http';
import { Injectable } from '#angular/core';
import { IAsset } from './asset';
import { AppSettings } from '../app.settings';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
#Injectable()
export class AssetService {
private _cid = 1234;
private _total = 774;
private _pageIndex = 1;
constructor(private _http: Http) { }
getAssets(pageIndex: number): Promise<IAsset[]> {
this._pageIndex = pageIndex;
let _assetApi = `${AppSettings.GET_CONFIG('assets')}?1cid=${this._cid}&count=${this._total}&index=${this._pageIndex}`;
return this._http.get(_assetApi)
.toPromise()
.then(response => response.json() as IAsset[]);
}
}
--------------------------------------------------------------------
//This is how custom Http is injected in the app module
import { NgModule, APP_INITIALIZER, ErrorHandler } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { Http, XHRBackend, RequestOptions } from '#angular/http';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './home/welcome.component';
import { ProductModule } from './products/product.module';
import { AppRoutingModule } from './app.routing.module';
import { ErrorLogService } from './shared/ErrorHandling/error.log.service';
import { CustomHttp } from './shared/Http/custom.http.service';
#NgModule({
imports: [
BrowserModule,
HttpModule,
AppRoutingModule,
ProductModule
],
declarations: [
AppComponent,
WelcomeComponent
],
providers: [
ConfigService,
AuthService,
ErrorLogService,
{
provide: Http,
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, _errorLogService: ErrorLogService) => {
return new CustomHttp(backend, defaultOptions, _errorLogService);
},
deps: [XHRBackend, RequestOptions]
}
],
bootstrap: [AppComponent],
})
export class AppModule { }
Now the problem is that I anytime there is a 500 internal server error on my data service, it is caught by by the CustomHttp, but the this.errorLogService.logError(error); >> errorLogService is undefined and does not invoke the logError on it.
I am using the Angular 2.0.0.0.
Any pointers on this issue? - Thanks.

Answer 1

You need to add ErrorLogService to CustomHttp's provider deps:
providers: [
ConfigService,
AuthService,
ErrorLogService,
{
provide: Http,
useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, _errorLogService: ErrorLogService) => {
return new CustomHttp(backend, defaultOptions, _errorLogService);
},
deps: [XHRBackend, RequestOptions, ErrorLogService] <-- this
}
],