Angularjs UI router resolve not working

Issue

I have a component which takes a state property which should be resolved but doesn’t. I am storing application state using ngStorage in the session state and when navigating between components load the state.

$stateProvider.state('app.insure-contents', {
  url: '/insure-contents',
  views: {
    'contents': {
      component: 'insureContents',
      resolve: {
        state: ['$sessionStorage', function ($sessionStorage) {
          console.log($sessionStorage.renterState);
          return $sessionStorage.renterState;
        }]
      }
    }
  }
})
const InsureContents = {
restrict: 'E',
bindings: {
    state: '<'
},
controller: InsureContentsCtrl,
templateUrl: 'renters/components/insure-contents.html'
}

The component loads fine but it seems the resolve function does not run.

Solution

Move the resolve outside of the views property:

$stateProvider.state('app.insure-contents', {
  url: '/insure-contents',
  views: {
    'contents': {
      component: 'insureContents'
    }
  },
  resolve: {
      state: ['$sessionStorage', function ($sessionStorage) {
          console.log($sessionStorage.renterState);
          return $sessionStorage.renterState;
      }]
  }
})

Answered By – Frank Modica

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.