title: Injected Logger is undefined in Custom Http in angular2
body: <p>I am trying to implement a global handler to manage HTTP errors in Angular2. Going through few reference: <a href="http://restlet.com/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/" rel="nofollow noreferrer">http://restlet.com/blog/2016/04/18/interacting-efficiently-with-a-restful-service-with-angular2-and-rxjs-part-3/</a> and <a href="https://blog.tomasandtomas.com/angular-2-http-interceptors-7e2d74b7f14e#.nxgxijnqu" rel="nofollow noreferrer">https://blog.tomasandtomas.com/angular-2-http-interceptors-7e2d74b7f14e#.nxgxijnqu</a> , I made the following:</p>
  
  <pre><code>--------------------------------------------------------------------
  // 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&lt;any&gt; {
          return super.request(url, options)
          .catch((error: any): any =&gt; {
              this.errorLogService.logError(error);
              return Observable.empty();
          })            
          .finally(() =&gt; {
              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&lt;IAsset[]&gt; {
          this._pageIndex = pageIndex;
          let _assetApi = `${AppSettings.GET_CONFIG('assets')}?1cid=${this._cid}&amp;count=${this._total}&amp;index=${this._pageIndex}`;
  
  
          return this._http.get(_assetApi)
              .toPromise()
              .then(response =&gt; 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) =&gt; {
              return new CustomHttp(backend, defaultOptions, _errorLogService);
          },
          deps: [XHRBackend, RequestOptions]
          }
      ],
      bootstrap: [AppComponent],
  
      })
      export class AppModule { }
  </code></pre>
  
  <p>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.</p>
  
  <p>I am using the Angular 2.0.0.0.</p>
  
  <p>Any pointers on this issue? - Thanks.</p>