change state inside $transition onStart hook function got Error

[xr]

$transitions.onStart({
        to: (state) => state.auth
    }, () => {
        if (syncAuthCheckFailed()) {
                        $state.go('state_not_auth');
            return false;
        } else {
            return true;
        }
    });

error:

message: "The transition has been superseded by a different transition (see detail)."

without $state.go() everything is fine

update

even i just simply called the $state.go inside onEnter, same error appear.

onEnter: ['$state', function ($state) {
        $state.go('guest');
}]

[hulkish]

try this instead:

$transitions.onStart({
  to: (state) => state.auth
}, () => {
  if (syncAuthCheckFailed()) {
    return $state.target('state_not_auth');
  } else {
    return true;
  }
});

[xr]

@hulkish thanks, but no use..

[christopherthielen]

In ui-router legacy, people wondered why their transitions were failing silently. In 1.0, we added a default error handler which is printing the message that the original transition (to an auth state) was superseded by the new one (to guest). Read more here

1. Disable the default error handler in production mode by calling $state.defaultErrorHandler(function() { /* do nothing */}); (or provide some meaningful filtering/error logging)

2. The suggestion by @hulkish is the correct approach. Instead of forcibly superseding the original transition, use $state.target('guest') to nicely redirect the original transition.

Enable trace to get more insight into what is happening.

app.run(function($trace) { $trace.enable('TRANSITION'); })

[ashwaniare]

I followed the same steps but getting Error: Too many Transition redirects (20+) . I am using return $state.target('state_not_auth'); as you mentioned instead of state.go('state_not_auth')

[christopherthielen]

@ashwaniare I suspect your hook is being run in an infinite loop.

• Hook is invoked on initial transition
• Hook redirects to state_not_auth
• Hook is invoked on redirected transition
• Hook redirects to state_not_auth
• ...

Make sure your hook doesn't redirect if it's already heading to state_not_auth.

[0xAshish]

Solution
$transitions.onStart({
to: (state) => state.auth
}, () => {
if (syncAuthCheckFailed()) {
return $state.target('state_not_auth');

    } else {
        return true;
    }
});