title: Angular 6 ERROR TypeError: Cannot read property 'navigate' of undefined
body: <p>In my errorhandler I'm trying to navigate to another page when I hit an error.</p>
  
  <p>I try to get a list of items if that fails I want to navigate to "./error401". I've been trying to do it like this:</p>
  
  <p><strong>UserTablecomponent:</strong></p>
  
  <pre><code>export class UserDataSource extends DataSource&lt;any&gt;{
  
  
    constructor(private authservice: AuthService) {
      super();
    }
    connect(): any {
      return this.authservice.GetInstallation();
    }
  
    disconnect() { }
  }
  </code></pre>
  
  <p>this call might be a bit weird. What it does is make a call to the rest see what ID I have based on the token. then uses the ID in the next call</p>
  
  <p><strong>auth.service</strong></p>
  
  <pre><code>  GetServiceProviderId(): Observable&lt;Info&gt; {
      return this.http.get&lt;Info&gt;(this.rooturl + 'info', { headers: this.reqHeader });
    }
  
    GetInstallation(): Observable&lt;Installation[]&gt; {
      return this.GetServiceProviderId().pipe(
        flatMap(info =&gt; {
          return this.http.get&lt;Installation[]&gt;
            (this.rooturl +
            "installation/?serviceproviderid=" +
            info.ServiceProviderId,
            { headers: this.reqHeader })
        }
      ), catchError(this.myerrorhandle.handleError))
    }
  }
  </code></pre>
  
  <p><strong>myerrorHandle</strong></p>
  
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class myerrorHandle {
  
    constructor(public router: Router) { }
  
    handleError(errorResponse: HttpErrorResponse) {
      switch (errorResponse.status) {
        case 401: {
          this.router.navigate(["./error401"])
          break;
        }
        default: {
          console.log("todo");
          break;
        }
      }
      return throwError('an error was thrown');
    }
  }
  </code></pre>
  
  <p>and this is were I want to navigate to "./error401" but get the</p>
  
  <blockquote>
    <p>errror ERROR TypeError: Cannot read property 'navigate' of undefined</p>
  </blockquote>
  
  <p>This is full error log:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'navigate' of undefined
        at CatchSubscriber.push../src/app/myerrorHandle.ts.myerrorHandle.handleError
    [as selector] (myerrorHandle.ts:18)
        at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error
    (catchError.js:33)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error
    (Subscriber.js:80)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error
    (Subscriber.js:60)
        at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error
    (Subscriber.js:80)
        at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error
    (Subscriber.js:60)
        at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error
    (Subscriber.js:80)
        at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error
    (Subscriber.js:60)
        at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/OuterSubscriber.js.OuterSubscriber.notifyError
    (OuterSubscriber.js:13)
        at InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber.js.InnerSubscriber._error (InnerSubscriber.js:18)</p>
  </blockquote>