title: Cyclic dependency in ErrorHandler
body: <p>I created a basic error handler that is supposed to catch errors and display them through a toaster.</p>
  
  <pre><code>// global.errorHandler.ts
  import { ErrorHandler, Injectable } from '@angular/core';
  import { ToastrService } from 'ngx-toastr';
  
  @Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
    constructor( private toastr: ToastrService ) {}
  
    handleError( error ) {
      this.toastr.error( error.message );
      throw error;
    }
  }
  </code></pre>
  
  <p>Then I import it into app module:</p>
  
  <pre><code>// app.module.ts
  import { ErrorHandler, NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { GlobalErrorHandler } from './global.errorHandler';
  import { ToastrModule } from 'ngx-toastr';
  
  @NgModule({
    declarations: [ AppComponent ],
    imports: [ ToastrModule.forRoot() ],
    providers: [
      {
        provide: ErrorHandler,
        useClass: GlobalErrorHandler
      }
    ],
    bootstrap: [ AppComponent ]
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>And finally throw an error in <code>AppComponent</code> like <code>throw new Error( 'YOU DIDN\'T SAY THE MAGIC WORD' );</code></p>
  
  <p>On page load this logs an error in the console: <code>Cannot instantiate cyclic dependency!</code></p>
  
  <p>I tried to use the <code>Injector</code> <s>hack</s> workaround like so:</p>
  
  <pre><code>// global.errorHandler.ts
  private toastr: ToastrService;
  constructor( injector: Injector ) {
    setTimeout(() =&gt; {
      this.toastr = injector.get( ToastrService );
    });
  }
  </code></pre>
  
  <p>This allows the error handler to load, but never actually executes the toast. I'm guessing it has something to do with the order in which the dependencies are loaded in Angular but I'm not sure how to resolve this.</p>