Angular 2 redirect in global ExceptionHandler

Question

I'm trying to implement an ExceptionHandler that redirects the user to an error page.

For that I need to inject a router object like so:

@Injectable()
class RedirectExceptionHandler extends ExceptionHandler {

  constructor(private router: Router) {
    super(null, null);
  }

  call(error: any, stackTrace: any = null, reason: any = null) {
    // ...log and redirect to error page
  }
}

However, when I run this code I get an exception:

(index):87 Error: EXCEPTION: Error during instantiation of ApplicationRef_! (ApplicationRef -> ApplicationRef_).
    ORIGINAL EXCEPTION: Cannot instantiate cyclic dependency! (ExceptionHandler -> Router -> ApplicationRef)
    ORIGINAL STACKTRACE:
    Error: DI Exception
        at CyclicDependencyError.BaseException [as constructor] (http://localhost:1080/node_modules/@angular/core/src/facade/exceptions.js:17:23)
        at CyclicDependencyError.AbstractProviderError[as constructor] (http://localhost:1080/node_modules/@angular/core/src/di/reflective_exceptions.js:39:16)
        at new CyclicDependencyError(http://localhost:1080/node_modules/@angular/core/src/di/reflective_exceptions.js:102:16)
        at ReflectiveInjector_._new (http://localhost:1080/node_modules/@angular/core/src/di/reflective_injector.js:613:19)
        at ReflectiveInjectorDynamicStrategy.getObjByKeyId (http://localhost:1080/node_modules/@angular/core/src/di/reflective_injector.js:270:50)
        at ReflectiveInjector_._getByKeyDefault (http://localhost:1080/node_modules/@angular/core/src/di/reflective_injector.js:795:38)
        at ReflectiveInjector_._getByKey (http://localhost:1080/node_modules/@angular/core/src/di/reflective_injector.js:767:25)
        at ReflectiveInjector_._getByReflectiveDependency (http://localhost:1080/node_modules/@angular/core/src/di/reflective_injector.js:757:21)
        at ReflectiveInjector_._instantiate (http://localhost:1080/node_modules/@angular/core/src/di/reflective_injector.js:654:36)
        at ReflectiveInjector_._instantiateProvider (http://localhost:1080/node_modules/@angular/core/src/di/reflective_injector.js:626:25)
    Evaluating http://localhost:1080/app/main.js
    Error loading http://localhost:1080/app/main.js

Is there a solution for this? Is it possible to instantiate the router in the call method instead, thereby avoiding the cyclic dependency during object creation?

Answer 1

Inject Angular's injector and get the router instance at a later stage, after your error handler component has already been instantiated:

constructor(private injector:Injector) {
    super(null);
}

ngOnInit() {
    this.router = this.injector.get(Router);
}

So later on you can use the router instance:

call(exception:any, stackTrace?:any, reason?:string):void {
    this.router.navigate(...);
}