How to use ocLazyLoad resolved file in ui-router resolve property

Question

I want to resolve an api call before view showing it's straightforward by using ui-router resolve property but my resolve property dependent on ocLazyLoad resolved file. So, I getting this error Error: [$injector:unpr] Unknown provider: SavedFactoryProvider <- SavedFactory

This is my code

$stateProvider.state('app.saved', {
    url: '/saved',
    templateUrl: 'app/modules/saved/views/saved.html',
    controller: 'SavedSearchCtrl',
    resolve: {
      loadFiles: ['$ocLazyLoad', function($ocLazyLoad) {
        return $ocLazyLoad.load([{
          name: 'app.saved',
          files: [
            'app/modules/saved/controller.js',
            'app/modules/saved/factory.js',
          ],
          cache: false
        }]);
      }],
      searches: ['loadFiles', 'SavedFactory', function(loadFiles, SavedFactory) {
        return SavedFactory.getSavedSearches();
      }]
    }
});

Thank you!

Answer 1

Route resolvers are resolved in parallel with $q.all. Since $ocLazyLoad.load(...) is asynchronous, it surely won't be completed at the moment when searches is called.

$ocLazyLoad.load(...) returns a promise which is can be chained in order to avoid race conditions, something like:

  searches: function($ocLazyLoad, $injector) {
    return $ocLazyLoad.load([
      {
        name: 'app.saved',
        files: [
          'app/modules/saved/controller.js',
          'app/modules/saved/factory.js',
        ],
        cache: false
      }
    ])
    .then(function () {
      var SavedFactory = $injector.get('SavedFactory');
      return SavedFactory.getSavedSearches();
    });
  }

As opposed to ngRoute, UI Router supports a hierarchy of resolvers; a graph of dependencies is being built on state change. The order in which they are resolved can be determined by their dependencies. So searches should list loadFiles as its dependency:

  searches: function(loadFiles, $injector) {
    var SavedFactory = $injector.get('SavedFactory');
    return SavedFactory.getSavedSearches();
  }

$injector.get is apparently necessary due to the fact how UI Router invokes resolver functions internally.