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!

Estus Flask · Accepted Answer · 2017-12-17T12:53:30.417

2

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.

edited Dec 17 '17 at 12:53

answered Dec 17 '17 at 11:39

Estus Flask

206,104
70
425
565

Hi @estus it's working perfect. Suppose i want to resolve two what i do with this same approach? – Arjun Kariyadan Dec 17 '17 at 11:48
I overlooked the fact that you use UI router and not ngRoute. It's a tad easier there and solves the problem with multiple resolver dependencies, Updated the answer. – Estus Flask Dec 17 '17 at 12:19
No luck, I tried that before, I am updated my question. Please take a look if I made any mistakes, Thanks @ estus – Arjun Kariyadan Dec 17 '17 at 12:29
I would expect it to work, but since oclazyload is hacky by design, the result is unpredictable. Try `searches: function(loadFiles, $injector) { return $injector.get('SavedFactory').getSavedSearches() }` – Estus Flask Dec 17 '17 at 12:41
Thank you so much @estus. it's working perfectly. You're great :) – Arjun Kariyadan Dec 17 '17 at 12:50

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

1 Answers1