title: Angular - Navigation in ErrorHandler only works with zone.run()
body: <p>I implemented a global error handler in angular (version 5.2.0) for all unhandled exceptions.</p>
  
  <p>The global error handler looks like this:</p>
  
  <pre><code>import { Router } from '@angular/router';
  import { ErrorHandler, Injectable, Injector, NgZone } from '@angular/core';
  import { LoggingService } from '../services/logging.service';
  
  @Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
  
    private router: Router;
  
    constructor(injector: Injector, private zone: NgZone, private loggingService: LoggingService) {
      setTimeout(() =&gt; {
        this.router = injector.get(Router);
      });
    }
  
    handleError(error) {
      this.loggingService.logErrorToApi(error);
      this.zone.run(() =&gt; this.router.navigate(['/error']));
    }
  }
  </code></pre>
  
  <p>The routing only works if I have the call <code>this.zone.run(...)</code>.
  If I remove this call the routing only adds the route <code>error</code> to the URL and doesn't display the component. The ngOnInit isn't called either.</p>
  
  <p>If I have to use such a "hack" to get my routing to work to me it seems that I have a misconfiguration somewhere in my application.</p>
  
  <p>Has someone and idea what I need to change to get it running without the zone call?</p>
  
  <hr>
  
  <p>My routing:</p>
  
  <pre><code>const appRoutes: Routes = [
    {
      path: 'error',
      component: ErrorComponent
    },
    {
      path: '',
      component: HomeComponent,
      canActivate: [CookieGuard]
    },
    { path: '**', component: PageNotFoundComponent }
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      HeaderComponent,
      FooterComponent,
      HomeComponent,
      PageNotFoundComponent,
      ErrorComponent
    ],
    imports: [
      RouterModule.forRoot(appRoutes, { enableTracing: !environment.production }),
      BrowserModule,
      FormsModule,
      ReactiveFormsModule,
      HttpClientModule,
      HttpClientXsrfModule,
    ],
    providers: [
      { provide: ErrorHandler, useClass: GlobalErrorHandler },
      ApiHttpClientService,
      AppSettingsService,
      CookieGuard,
      LoggingService
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <hr>
  
  <p>Here is my error component that I call:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'error',
    templateUrl: './error.component.html',
    styleUrls: ['./error.component.scss']
  })
  export class ErrorComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  }
  </code></pre>