Ui-router launches child state before parent state resolves

Question

I am trying to execute some initialization code in the parent state of Angular ui-router. The initialization code is orderService.getStoreInfo() , which returns a promise. Only when this promise is resolved does I want to invoke a child state. However, I notice that the child state is triggered even before the parent promise is resolved. What am I doing wrong? Here is my code:

 function configure($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { abstract: true, template: '<ui-view/>', resolve: { storeInfo: /* @ngInject */ function(orderService) { console.log('home: resolve - orderService.getStoreInfo()'); return orderService.getStoreInfo(); } } }) .state('home.orders', { url: '^/', template: '<my-order-list data-orders="vm.orders"></my-order-list>', resolve: { orders: /* @ngInject */ function (orderService) { console.log('home.orders: resolve - orderService.getOrders()'); return orderService.getOrders(); } }, controller: ['orders', function (orders) { this.orders = orders; }], controllerAs: 'vm', }); } 

The console log is as follows:

 home: resolve - orderService.getStoreInfo() home.orders: resolve - orderService.getOrders() ... messages from orderService.getStoreInfo() ... 

This clearly shows that the child state starts even before the parent state resolves.

Answer 1

The answer is here : resolve keys MUST be entered into child states if you want to wait for promises to resolve before creating children. Therefore, we simply insert storeInfo into the child state resolution function.