Angular ui-router allows call twice

Question

This has made me go crazy for the past few hours, and I can’t find a solution as before ...

Basically, I change state to 404 when the solution returns an http 404 status code. I change state in the $stateChangeError event. Everything works fine, except that after changing the state to 404 it starts another state change back to the original, thereby allowing twice. The state itself remains at 404 , so in the end it works, but it still makes additional $http requests that are not needed. However, it only works if I use $state.go('404', null, { location: false }) OR if state 404 missing a specific URL.

If I have a url defined for state 404 ( /404 ) then everything works fine.

Here are 2 pens showing the problem:

Error: http://codepen.io/cprfnaporf/pen/RaqmQN (debug mode, console check: http://s.codepen.io/cprfnaporf/debug/RaqmQN/ )

Worker: http://codepen.io/cprfnaporf/pen/MyzdVQ (debug mode, console check: <a3> )

Any idea how to solve this problem? I really don't know.

Thanks!

Answer 1

You have already found a solution for me. Indeed, as stated in your code:

 $urlRouterProvider.when('/', '/profile/x/details'); 

The default URL is /profile/x/details . When ui-router sees this url, it will try to load the state hierarchy: base , base.profile et base.profile.details . As you said, the latter will not be downloaded, since you will catch the 404 error and redirect the request to another location.

The problem is that you are still in /profile/x/details . So, in stateChangeError , when you executed $state.go('404', null, { location: false }); ui-router will check the url.

Since it is not set to 404 , it will take the one that it has: /profile/x/details . And that is why it allows the same hierarchy of states: base , base.profile et base.profile.details .

Answer 2

@Andrew, I think I don’t know exactly what your goals are, but it looks like you are struggling with the work of ui-router.

@Zakaria does a good job.

Perhaps take a step back and see if it really makes sense to keep the user on a dead page or partially dead page. If you are trying to handle a failed solution, then maybe catch this 404 (or the failed request) and return the default resolution instead of going to the new error state. By $urlRouterProvider.when('/', '/profile/x/details'); when statement in $urlRouterProvider.when('/', '/profile/x/details'); , you will only encounter problems, as it was now.