ui-router "The transition was ignored" during state transition

Issue

I want to set a general error handler for certain states of my app like main.* and want to redirect user to a general error page if any of state resolves are failed.

I set the following error handler:

  $transitions.onError({to: "main.*"}, function (trans) {                   
       $state.go("transition-error")
  });

but If I click on a link say <a ui-sref="main.profile"> profile </a>, and transition occurs successfully and I click on that link for the second time, my error handler gets executed with an error message of: "The transition was ignored", How can I prevent my error handler to be executed when there is such error? Why am I receiving this error?

Solution

The error details can be retrieved from the transition using trans.error(). The value is a Rejection object. In your onError handler, check the type of the rejection. For example, you could choose to redirect only if the reject type is “ERROR”:

$transitions.onError({to: "main.*"}, function (trans) {                   
   var rejection = trans.error();
   if (rejection.type === RejectType.ERROR) { // === 6
     $state.go("transition-error");
   }
});

https://ui-router.github.io/ng1/docs/latest/classes/transition.rejection.html#type

https://ui-router.github.io/ng1/docs/latest/enums/transition.rejecttype.html#error

Answered By – Chris T

Answer Checked By – Cary Denson (AngularFixing Admin)