如何使用ui-router显示错误页面，在从先前状态导航时更改URL？

Question

I'm using ui-router 1.0.0 and angularjs 1.4.2. I'd like to implement the usual behaviour of displaying error pages :

• I'm viewing the state /foo
• I click on /bar, for which a resolve ends up with a 500 error (backend)
• The url changes to /bar and the error page is displayed (url is still /bar)

Of course, if I type directly the /bar url in my browser, I'd like to see the same page. History buttons should also work as expected. I've tried the following code but the url doesn't change, staying with /foo.

$transitions.onError({},
  function () {
    $state.go('error', null, { location: false });
  }
);

How is that possible ?

Answer 1

Using your example URLs:

• '/foo' - normal, functioning state
• '/bar' - state for which the resolve is rejected due to a 500

The functionality should already work as expected if navigating directly to '/bar'. The URL will be '/bar', and you can show your error state on that page

If navigating from '/foo', then I haven't found any way to tell ui-router to change the URL to that of the target state if a resolve is rejected, but I did find a workaround:

• In onError , manually change the URL to that of the target state.
• This will trigger a new transition to the same target, which will again cause an onError, so we need to ensure we don't perform another URL change if the target path already matches the current path (there's potential for an infinite loop here)

For example:

const targetState = transition.targetState().name;
const targetHref = $state.href(targetState);
const currentPath = $location.path();

if (targetPath !== currentPath) {
    //  This triggers a new transition to the same state, but with the URL already changed
    // (so that the URL represents the target state even if the transition is rejected)
    $location.path(targetPath);
} else {
    // In this case we're on the target URL for this failed transition, and we
    // show our error state while leaving the user's intended URL in place
    $state.go('error', null, { location: false });
}