title: custom error handler throw error : Cannot read property 'get' of undefined ( Injector )
body: <p>I am building a custom error handler in angular 4 to handle different kind of application error with error interceptor</p>
  
  <p>create a base class( <em>app-error.ts</em> ) and other classes ( for eg. to handle 403 errors create class <em>access-denied.ts</em> ) which extend this base class. </p>
  
  <p>in the base class have injected a service <code>toastrService</code> and I want to display custom message from the child class BUT it gives the error on </p>
  
  <p>Cannot read property 'get' of undefined</p>
  
  <p>thisissue is related to OOPS concept. I do not understand how to get override parent method or call with my custom argument.</p>
  
  <p>TS v 2.3.3
  angular v 4.3.4</p>
  
  <h3>app.module.ts</h3>
  
  <pre><code>providers: [
  { provide: ErrorHandler, useClass: AppErrorHandler }
  ]
  </code></pre>
  
  <p>NOTE: AppErrorHandler class is completely different than AppError which extend angular ErorHandler interface which handle system errors.</p>
  
  <h3>error-interceptor</h3>
  
  <pre><code>import { Router } from '@angular/router';
  import { Injectable, Injector } from '@angular/core';
  import { HttpInterceptor, HttpResponse, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse
  } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/operator/do';
  
  import {
      AuthFail,
      BadInput,
      NotFoundError,
      ServerError,
      AppError,
      AccessDenied,
  } from '../shared/errors';
  import { AuthenticationService } from './../authentication/authentication.service';
  
  
  @Injectable()
  export class ErrorInterceptor implements HttpInterceptor {
  
      private auth: AuthenticationService;
      constructor(private router: Router, private injector: Injector) { }
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
          const auth = this.injector.get(AuthenticationService);
          return next.handle(req).catch((err: HttpErrorResponse) =&gt; {
              if (err instanceof HttpErrorResponse) {
                  if (err.status === 401) {
                      return Observable.throw(new AuthFail(err.error));
                  }
                  if (err.status === 400) {
                      return Observable.throw(new BadInput(err.error));
                  }
                  if (err.status === 404) {
                      return Observable.throw(new NotFoundError());
                  }
                  if (err.status === 403) {
                      return Observable.throw(new AccessDenied());
                  }
                  return Observable.throw(new AppError(err));
              }
          });
      }
  }
  </code></pre>
  
  <h3>access-denied.ts</h3>
  
  <pre><code>import { AppError } from './app-error';
  export class AccessDenied extends AppError {
      constructor(public originalError?: any) {
          super();
          console.log('inside acces denied constructor');
          // super.handleError("superrrrr"); // this also doesn't work
      }
  
      public handleError(): void {
          console.log('handleError: ', );
          super.handleError("Access denined error occured");
      }
  }
  </code></pre>
  
  <h3>app-error.ts</h3>
  
  <pre><code>import { Inject, Injector } from "@angular/core";
  
  import { ToastrService } from "ngx-toastr";
  
  export class AppError {
      toastrService: ToastrService;
      constructor(public originalError?: any, private injector?: Injector) {
          this.toastrService = this.injector.get(ToastrService);
      }
  
      // NOTE: using getter seems impossible to access in child so add the same in constructor
      // get toastrService(): ToastrService {
      //  return this.injector.get(ToastrService);
      // }
  
      public handleError(msg: string): void {
          this.toastrService.error(`Error Message: ${msg}`,
              "Error", {
                  closeButton: true,
                  timeOut: 5000,
                  onActivateTick: true
              }
          );
      }
  
  }
  </code></pre>
  
  <p>gives error</p>
  
  <hr>
  
  <pre><code>core.es5.js:1020 ERROR TypeError: Cannot read property 'get' of undefined 
      at AccessDenied.AppError (app-error.ts:8) 
      at new AccessDenied (access-denied.ts:6)  
      at CatchSubscriber.eval [as selector] (error.interceptor.ts:61) 
      at CatchSubscriber.error (catchError.js:105)
      at XMLHttpRequest.onLoad (http.es5.js:1739)
      at ZoneDelegate.invokeTask (zone.js:421)
      at Object.onInvokeTask (core.es5.js:3881)
      at ZoneDelegate.invokeTask (zone.js:420)
      at Zone.runTask (zone.js:188)
      at ZoneTask.invokeTask [as invoke] (zone.js:496)
  </code></pre>