Not possible to add state.resolve from $stateChangeStart event

[facultymatt]

Overview:
Sometimes it's desirable to add state resolves on the fly, instead of needing to add them to all states beforehand. For example, a resolve that verifies a user is authenticated or fetches the user from an API.

It's possible to do this with $routeChangeSuccess using the following code:

// @see http://stackoverflow.com/a/18245378/1738217
function authenticate() {
    if ( user.isAuthenticated ) {
        return;
    }
    // simulate deferred
    return $timeout(function() {
        user.isAuthenticated = true;
    }, 3000);
}

$rootScope.$on( "$routeChangeStart", function( e, next ) {
    next.resolve = angular.extend( next.resolve || {}, {
        __authenticating__: authenticate
    });
});

However the same is not possible with $stateChangeSuccess. This is because the event is broadcast with to.self, see this line. This means if you add a resolve in the $stateChangeSuccess event, you are actually adding on to.self.resolve which is never considered for resolve.

_Related:_
#1153

[timkindberg]

Seems like it could be handy.

[NicoleY77]

Same problem here. I can't add a custom resolve dynamically so I have to hack this way:

$stateProvider
     .state("home", {
           url: "/",
           resolve: {} // add {} default
})

[christopherthielen]

Interestingly, resolve is one of the only fields on state that can't be decorated via the standard API. However, you can decorate it another, uglier way.

      // Need access to both state representations. Decorate any attribute to access private state object.
      $stateProvider.decorator('path', function(state, parentFn) {
        if (state.self.resolve === undefined) {
          state.self.resolve = {};
          state.resolve = state.self.resolve;
        }
        return parentFn(state);
      });

[elado]

👍 very useful.

I sometimes load additional resources (css/js/images..) before showing a route, making sure it's fully loaded. I'm switching now to ui-router and encountered this issue.

[elado]

As @NecoleYu wrote (thanks!), initializing the state definitions with resolve: {} gives access to the actual resolve object that is used internally by ui-router, and allows to add resolves within $stateChangeStart.

$stateProvider
  .state 'home',
    url: "/"
    resolve: {}

...

  $rootScope.$on '$stateChangeStart', (e, toState, toParams, fromState, fromParams) ->
    toState.resolve.x = ->
      $timeout ->
        alert "done"
      , 3000

but would be nicer not to need this.

[afc163]

@elado Agree

[kureus]

@elado Very useful follow up comment

[peterrobertz]

Oh that possibillity would be wonderful!

[goliney]

Need it so much. Very handy. +1

[pmowrer]

I'd love to see this as well. I wasn't able to make @christopherthielen's workaround work, though I was scratching my head as to why. Perhaps it depends on the nesting. Stepping through it, it appears the decoration has to happen before the state building is queued, for whatever reason. No hooks to work with there so for now I wrapped $stateProvider.state, decorating the config before passing it onto the original implementation. If anyone has a better solution I'd love to hear it.

[hoeni]

+1. That would be really helpful!

[NilsEngelbach]

also struggeld with this problem because some states had a defined resolve object and some did not.
Took me forever to figure out why this was not working with all states:

if (!toState.resolve) { toState.resolve = {} };
toState.resolve.pauseStateChange = [ '$q', ($q: ng.IQService) => {...})];

Now i use the decorator suggested by @christopherthielen ! Thanks :)

But it should be possible to extend the resolve method without this "hack"! 👍

[alexweber]

Thanks all for the comments, this is gold! :) 👍