Handling 404 in resolve with angular-ui-router

Question

I have a service with a method:

service.getVenueBySlug = function(slug) {
    return $http.get(API + '/venue/' + slug);
};

In my app.routes.js`:

.state('app.venue', {
  url: '/venues/:venueSlug',
  templateUrl: '/app/views/venue.html',
  controller: 'VenueController',
  resolve: {
    venue: ['VenueService', '$stateParams', '$state', function (VenueService, $stateParams, $state) {
      return VenueService.getVenueBySlug($stateParams.venueSlug).then(function(res) {
        return res.data;
      }).catch(function(err) {
        $state.go('app.404');
      });
    }]
  }
})

The controller VenueController simply has:

$scope.venue = venue

Everything is working and it's correctly redirecting to 404 if I manually go to an URL with a wrong venue slug.

The issue is that I'm receiving an error in the console that it's bothering me:

Does anyone know how to fix? I'm using angular 1.6.4 and angular-ui-router 1.0.6.

use npm update angular-ui-router to update ui router, may be it resolved your issue — Nimisha Molia
– Nimisha Molia, Commented Aug 24, 2017 at 10:49

Per Johansson · Accepted Answer · 2017-08-24 11:47:58Z

2

As mentioned in a comment to your post - in your resolve's catch, you probably should do something in the lines of: return $q.reject({redirectTo: app.404});

Then in your router config you listen to stateChangeErrors:

$rootScope.$on('$stateChangeError',
   function(event, toState, toParams, fromState, fromParams, error) {
      if(error.redirectTo) {
         $state.go(error.redirectTo);
      }
   } 
})

the $q.reject is required to handle (interrupt) the current stateChange, and the stateChangeError is there to handle that reject.

(haven't tested the code but I remember having a similar solution in one of my projects)

answered Aug 24, 2017 at 11:47

Per Johansson

435 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Fred Collins Over a year ago

Thanks. What's the different between using $stateChangeError and $state.defaultErrorHandler?

Per Johansson Over a year ago

defaultErrorHandler is an addition in 1.0. They serve the same purpose. You can register your function that your route errors will be passed to in an app.run for example. Reading up on the breaking changes however, from the docs migration guide: "All state events, (i.e. $stateChange* and friends) are now deprecated and disabled by default". ui-router.github.io/guide/ng1/migrate-to-1_0 So if you're using 1.0, use defaultErrorHandler

Collectives™ on Stack Overflow

Handling 404 in resolve with angular-ui-router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related