Currently, I am encountering an issue with executing initialization code within a parent state of the Angular ui-router. The initialization code in question is orderService.getStoreInfo(), which returns a promise. My intention is to trigger the child state only after this promise has been resolved. However, it seems that the child state is being triggered prior to the resolution of the parent's promise. Can you please help me identify what might be incorrect with my approach? Below is the relevant snippet of 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 output for the above code is as follows:
home: resolve - orderService.getStoreInfo()
home.orders: resolve - orderService.getOrders()
... messages from orderService.getStoreInfo() ...
Based on the console log, it is evident that the child state is being activated before the resolution of the parent state. This is not the desired behavior.