Multiple config blocks in angular module

Question

I need to resolve some dependencies (fetching data for my services, etc.) in my app before it loads. I would like to separate these out, so that I have one config block for the main app, and then one or more config blocks for other parts of the app.

Ultimately, I'm hoping to have it resolve the dependencies for the main app, load the components associated with that, and then resolve the rest and load those parts, so it's a little more responsive when loading.

This is what I've come up with so far, but it is not resolving the dependencies in the first config block:

angular.module('myApp', ['ui.router', 'kendo.directives'])
  .config(function($stateProvider) {
    $stateProvider
      .state('settings', {
        url: '/',
        views: {
          'mainNav': {
              templateUrl: 'scripts/directives/mainNav/mainNav.html',
              controller: 'mainNavCtrl'
          //etc
          }
        },
        resolve: {
          fetchSettings: function(Settings) {
            return Settings.fetch;
          }
        }
      });
  })
  .config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('otherPart', {
        url: '',
        views: {
          'otherPart': {
            templateUrl: 'views/otherPart.html' 
           //etc
          }
        },
        resolve: {
          fetcherPromise: function(User, MyData) {
            var fns = [
              MyData.fetch,
              User.fetchEntitlements
            ];
            return fetcher.inSerial(fns);
          }
        }
      })
      ;

  });

Am I even on the right track?

You could use .run() instead of .config(), to lauch the fetch call. In your main component, while data isnt ready, dont show anything. — anotherdev
– anotherdev, Commented Nov 25, 2019 at 8:16

nircraft · Accepted Answer · 2018-11-06 14:24:23Z

0

Having multiple config blocks in application is not a problem. it should work fine. It is totlly fine to chain configs to keep things isolated like. there should be something else that you are missing here. May be the service providers are not resolved at the time App configuration starts.

Or The module which has the service in it is not resolved at the time of App start up. Make sure the module or services which are used in config block are resolved and available in AppModule at start up.

answered Nov 6, 2018 at 14:24

nircraft

8,5085 gold badges33 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Multiple config blocks in angular module

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related