angular-ui/ui-router $stateChangeError never fires for a state that does not exist

Question

My issue is that ui-router $stateChangeError is not triggered by a "404" invaild state.

I know for sure that my on $stateChangeSucess fires correctly:

$rootScope.$on('$stateChangeSuccess', 
        function(event, toState, toParams, fromState, fromParams)

When I intentionally make an invalid state like so:

 <ui-view>
    <a ui-sref="foo" style="cursor: pointer;">Foo is not a state</a>
 </ui-view>

The $stateChangeError event is not fired, I know I have the correct signature

angular
    .module('blocks.router')
    .run(['$rootScope', function($rootScope) {
        $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
            console.log('$stateChangeError fired!');
        });
    }]);

And I add my function to $stateChangeError at the same time I add my working $stateChangeSuccess.

Any suggestions to what I might be doing wrong?

Do you implement `$urlRouterProvider.otherwise()`? If so, that's why an invalid state won't trigger an error — Phil, Aug 22 '16 at 02:08
No I am not currently implementing a $urlRouterProvider.otherwise() — Brian Ogden, Aug 22 '16 at 02:31
@Phil adding $urlRouterProvider.otherwise("/") did NOT trigger an error — Brian Ogden, Aug 22 '16 at 05:51
I was mistaken. I thought that specifying an `otherwise` would mean you never had a state error from an unknown state but it appears that condition never happens anyway. — Phil, Aug 22 '16 at 05:55
I have a similar problem, `$stateChangeError` does not fire for non-existing state, and while I have `.otherwise` implemented and `$stateChangeStart` is fired before navigating to it, unfortunately the parameters passed to it do not have the info of what was the original URL requested — jakub.g, Feb 07 '17 at 16:39
It would be interesting to somehow be able to know what was the exact URL requested, for example, to handle deeplinks with hash for backward compatibility when changing the states names in the app etc. — jakub.g, Feb 07 '17 at 16:41
related: http://stackoverflow.com/questions/20745761/what-is-the-angular-ui-router-lifecycle-for-debugging-silent-errors — jakub.g, Feb 09 '17 at 15:22

score 3 · Accepted Answer · edited Feb 09 '17 at 15:16

3

Angular-ui-router has $stateNotFound for such case

edited Feb 09 '17 at 15:16

jakub.g

38,512
12
92
130

answered Feb 08 '17 at 20:59

Igor B

905
11
26

Brian Ogden · Answer 2 · 2017-08-20T08:07:41.497

So '$stateChangeError' will not fire for an invalid/misspelled state. For example if you state is "login" and you change state to "loginfoo" in a controller, '$stateChangeError' will not fire.

Now if your templateUrl location for state "login" is "app/templates/login.html" and you incorrectly name your template "app/templates/loginfoo.html" '$stateChangeError' will fire when you go to the "login" state.

So '$stateChangeError' fires for a valid state request that cannot find the controller, template, resource for that valid state. But it will not fire for a state that is misspelled aka simply does not exist.

Failed `resolve` promises will also trigger a state change error — Phil, Aug 22 '16 at 02:07

angular-ui/ui-router $stateChangeError never fires for a state that does not exist

2 Answers2