Angularjs ui-router abstract state with resolve

Solution 1:

Solution here is to distinguish the names of the resolved data. Check this answer:

• angular ui-route state parent and resolve (nested resolves)

And its plunker

So in our case we would need this change in parent

resolve: {
    dataParent: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
        var username = $stateParams.username;
        return ProfileService.getProfile(username);
    }]
}

and this in child

resolve: {
    dataChild: ['$stateParams', 'ProfileService', function ($stateParams, ProfileService) {
        var username = $stateParams.username;
        return ProfileService.getProfileSomething(username);
    }]
}

so, instead of working with resolve : { data: ... } in parent and child we would have these:

// parent state
resolve : { dataParent: ... } 
// child state
resolve : { dataChild: ... } 

One working example should be better than other words...