title: Angular 2: parent class dependency injected is undefined
body: <p>I'm trying a implement a service which all other services would extend to handle api responses. I followed this question</p>
  
  <p><a href="https://stackoverflow.com/questions/39038791/inheritance-and-dependency-injection">Inheritance and dependency injection</a></p>
  
  <p>and here is my parent class:</p>
  
  <pre><code>import {Injector} from '@angular/core';
  import {Router} from "@angular/router";
  import {Response} from "@angular/http";
  
  export class ApiService {
  
    protected _router: Router;
  
    constructor(injector: Injector) {
      console.log('inside ApiService constructor');
      this._router = injector.get(Router);
      console.log(this._router);
    }
  
    extractData(res: Response) {
      if (res.json().status === 200) {
        return res.json().data;
      }
    }
  
    extractResponse(res: Response) {
      if (res.json().status === 200) {
        return res.json();
      }
    }
  
    handleErrorPromise(error: Response | any) {
      console.log('inside handleErrorPromise');
      console.error(error.message || error);
      console.log(this._router);
  
      if (error.status === 401 || error.status === "401") {
        // session out
        this._router.navigate(['/login']);
      } else {
        return Promise.reject(error.json().message | error.message || error);
      }
    }
  
  }
  </code></pre>
  
  <p>and here's the service that extends it:</p>
  
  <pre><code>@Injectable()
  export class VitalService extends ApiService {
  
    constructor(private http: Http, injector: Injector) {
      super(injector);
    }
  
    getUserVitals(): Promise&lt;VitalDashboardItem[]&gt; {
      return this.http.get('/gch-restful/vital-entry/dashboard')
        .toPromise()
        .then(response =&gt; {
          return response.json().data as VitalDashboardItem[];
        })
        .catch(this.handleErrorPromise);
    }
  
  }
  </code></pre>
  
  <p>but when it reaches the handleErrorPromise in super class</p>
  
  <p>I'm getting this error:</p>
  
  <pre><code>Error: Uncaught (in promise): TypeError: Cannot read property '_router' of undefined
  TypeError: Cannot read property '_router' of undefined
  </code></pre>
  
  <p>I been trying to figure what's wrong for a while now, tried a few things and had no luck. Any help is appreciated</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>changed it like this:</p>
  
  <pre><code>getUserVitals(): Promise&lt;VitalDashboardItem[]&gt; {
      return this.http.get('/gch-restful/vital-entry/dashboard')
        .toPromise()
        .then(response =&gt; {
          return response.json().data as VitalDashboardItem[];
        })
        .catch((e) =&gt; {
          return this.handleErrorPromise(e)
        });
    }
  </code></pre>