2

In my AngularJS application I want to catch errors and send the user to a 404 state like so:

$rootScope.$on('$stateNotFound',  function(event, unfoundState, fromState, fromParams){ 
    //console.log(unfoundState.to);
    //console.log(unfoundState.toParams);
    //console.log(unfoundState.options);
    $state.go('404');
});

This is for when a user clicks a bad link (e.g. has no state, as ones with states but no content are handled by the otherwise method) in the app, etc.

The code loads the 404 state fine:

.state('404',
        {
            views: {
                'body': {
                    templateUrl: 'partials/404.html',
                }
            }
        });

But what I want to do is change the URL to the state they tried to access, so basically load the 404 state but use the incorrect URL (as a 404 would work in a server environment).

I've looked into doing:

history.replaceState(null, null, unfoundState.to);
$state.go('404');

But that causes major errors in the app and changes the URL but not the state!

How can I do this?

Cameron
  • 27,963
  • 100
  • 281
  • 483

2 Answers2

1

Try this to catch all URLs not matching any of your previous routes :

.state("404", {
    url: "*path", // will catch all URLs
    templateUrl: 'partials/404.html'
})
Jscti
  • 14,096
  • 4
  • 62
  • 87
1

According to the docs, I think you can do: 

$state.go('404',{},{location:false});

Note: I'm in the process of creating a plunkr to verify but I don't have time to finish it up completely right now

JoseM
  • 4,302
  • 2
  • 24
  • 35