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
– Scipion

2016-10-13 10:58:10 +00:00
Commented Oct 13, 2016 at 10:58 — Scipion
– Scipion, Commented Oct 13, 2016 at 10:58
hi updated the question with answer. :)

ssujan728
– ssujan728

2016-10-18 05:12:33 +00:00
Commented Oct 18, 2016 at 5:12 — ssujan728
– ssujan728, Commented Oct 18, 2016 at 5:12
I would love an update to this question for Angular6

mharris7190
– mharris7190

2018-07-20 14:57:48 +00:00
Commented Jul 20, 2018 at 14:57 — mharris7190
– mharris7190, Commented Jul 20, 2018 at 14:57

Thierry Templier · Accepted Answer · 2016-04-21 09:34:25Z

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, 2016 at 9:34

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ssujan728 Over a year ago

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.

Collectives™ on Stack Overflow

Angular 2 Custom Error Handling and Router

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related