Angular 2 Custom Error Handling and Router

Question

I have a custom exception handler that is supposed to take the user to a custom error page if any exception occurs(just trying it out).

I am trying to get the instance of the router using Injector. Reason for doing this, I believe the injector will give the existing router instance and using it i will be able to route the user.

Any ideas why this is not working or how this can be achieved ?

Thank You :)

@Injectable()
export class AppExceptionHandler extends ExceptionHandler{

constructor(){
    super(null, null);
}

call(exception:any, stackTrace?:any, reason?:string):void {
    console.log('call...')


    var providers = Injector.resolve([ROUTER_PROVIDERS]);
    var injector = Injector.fromResolvedProviders(providers);

    // this is causing issue, not sure it is the correct way
    let router : Router = injector.get(Router);

    // not executed
    console.log(router)

    // not executed 
    console.log('done...')
    router.navigate(["CustomErrorPage"]);
    }

}

Answer - tested in 2.0.0-beta.17 Thanks to Druxtan

1. Created a file app.injector.ts inside the app folder (app/app.injector.ts)

let appInjectorRef;

export const appInjector = (injector?) => {
    if (!injector) {
        return appInjectorRef;
    }

    appInjectorRef = injector;

    return appInjectorRef;
};

2. Added to the bootstrap in the main.ts

bootstrap(AppComponent,[ROUTER_PROVIDERS, HTTP_PROVIDERS,provide(ExceptionHandler,{useClass : AppExceptionHandler})])
    .then((appRef) => appInjector(appRef.injector));

3. In the AppExceptionHandler, retrieved the Router instance as shown below

export class AppExceptionHandler {

    call(exception:any, stackTrace?:any, reason?:string):void {

        let injectorApp = appInjector();
        let router = injectorApp.get(Router);
        let localStorageService = injectorApp.get(LocalStorageService);

        if(exception.message === '-1'){
            localStorageService.clear();
            router.navigate(["Login"]);
        }
    }

}

Did you find a solution to this problem ? – Scipion Oct 13 '16 at 10:58 — Scipion, Oct 13 '16 at 10:58
hi updated the question with answer. :) – ssujan728 Oct 18 '16 at 05:12 — ssujan728, Oct 18 '16 at 05:12
I would love an update to this question for Angular6 – mharris7190 Jul 20 '18 at 14:57 — mharris7190, Jul 20 '18 at 14:57

score 1 · Answer 1 · answered Apr 21 '16 at 09:34

1

I would implement your feature this way since this class takes place in the dependency injection:

@Injectable()
export class AppExceptionHandler extends ExceptionHandler {
  constructor(private router:Router) {
    super(null, null);
  }

  call(exception:any, stackTrace?:any, reason?:string):void {
    console.log('call...')

    this.router.navigate(['CustomErrorPage']);
  }
}

and register your handle this way:

bootstrap(MyApp, [
  provide(ExceptionHandler, {useClass: AppExceptionHandler})
]);

answered Apr 21 '16 at 09:34

Thierry Templier

198,364
44
396
360

Thank you for the suggestion Initially it was done this way. It still gave me problems. From the error message it looked like the AppExceptionHandler is initialized before the Router therefore it cant be injected. I tried this too `bootstrap(MyApp, [ ROUTER_PROVIDERS, provide(ExceptionHandler, {useClass: AppExceptionHandler}) ]);` even that didnt work, that is why i swithced to Injector. – ssujan728 Apr 21 '16 at 13:36

Angular 2 Custom Error Handling and Router

1 Answers1