How not to change url when show 404 error page with ui-router

Question

I want to show 404 error page, but also I want to save wrong url in location.

If I'll do something like that:

$urlRouterProvider.otherwise('404');
$stateProvider
    .state('404', {
        url: '/404',
        template: error404Template
    });

url will change to /404. How I can show error message on wrong urls without changing actual url?

Answer 1

There is solution for this scenario. We'd use 1) one ui-router native feature and 2) one configuration setting. A working example could be observed here.

1) A native feature of ui-router state definitions is:

The url is not needed. State could be defined without its representation in location.

2) A configuration setting is:

• otherwise() for invalid routes, which parameter does not have to be a string with default url, but could be a function as well (cite):

path String | Function The url path you want to redirect to or a function rule that returns the url path. The function version is passed two params: $injector and $location

Solution: combination of these two. We would have state without url and custom otherwise:

$stateProvider
  .state('404', {
    // no url defined
    template: '<div>error</div>',
  })

$urlRouterProvider.otherwise(function($injector, $location){
   var state = $injector.get('$state');
   state.go('404');
   return $location.path();
});

Check that all in this working example

Answer 2

As of ui-router#0.2.15 you can use $state.go() and send option not to update the location:

$urlRouterProvider.otherwise(function($injector) {

  var $state = $injector.get('$state');

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

});