Cannot Inject ToastrService into a custom error handler.

Running the latest version of ngx-toastr with Angular 4.1.2. I’m trying to make a custom error handler that puts out toasts when unexpected errors happen. The code looks like this -

` import { ToastrService } from ‘ngx-toastr’; import { ErrorHandler, Inject } from “@angular/core”;

export class AppErrorHandler implements ErrorHandler { constructor(@Inject(ToastrService) private toastrService:ToastrService) { }

handleError(error: any): void {
    this.toastrService.error(
        "An unexpected error has occurred.",
        "Error",
        {
          closeButton: true,
          timeOut: 5000
        }
      )
}

} `

When I try this I get an error on the console about there being a cyclic dependency while processing the app.module file. Error: Provider parse errors: Cannot instantiate cyclic dependency! ApplicationRef ("[ERROR ->]"): in NgModule AppModule in ./AppModule@-1:-1

I suspect that this error is misleading and Angular is just having trouble linking dependencies since the error handler gets loaded pretty early in the startup cycle. Is the problem even fixable? Or is there a way to feed error messages into a queue that can be processed by a service that once loaded can emit toasts? Any help is greatly appreciated.

[trevor-hackett]

Your example would be something like the following:

import { ErrorHandler, Inject, Injector, Injectable } from "@angular/core";
import { ToastrService } from "ngx-toastr";

@Injectable()
export class AppErrorHandler extends ErrorHandler {

  constructor(@Inject(Injector) private injector: Injector) { 
    super(true);
  }

  // Need to get ToastrService from injector rather than constructor injection to avoid cyclic dependency error
  private get toastrService(): ToastrService {
    return this.injector.get(ToastrService);
  }

  public handleError(error: any): void {
    this.toastrService.error(
      "An unexpected error has occurred.",
      "Error",
      {
        closeButton: true,
        timeOut: 5000,
        onActivateTick: true
      }
    );

    super.handleError(error);
  }
}

Then in AppModule:

@NgModule({
  // Your imports, declarations, bootstrap, etc.
  // ...

  providers: [
    // Other providers...

    {
      provide: ErrorHandler,
      useClass: AppErrorHandler
    }
  ]
})
export class AppModule {}

[trevor-hackett]

What you’re trying to do in that issue on stackoverflow is not the same as what is mentioned here. This issue is about trying to inject ToastrService into a custom ErrorHandler. In that SO issue, you’re trying to access ToastrService from a custom error. This is not the same and isn’t possible unless you pass the ToastrService into the constructor of your AccessDenied class. new AccessDenied(toastrService)

I’ve posted an answer on SO.