Parent's state params empty on $urlRouterProvider.otherwise state reload - angularjs

Question

I have my state configurations defined as below:
$stateProvider
.state('parentState', {
abstract: true,
url: '/:tenantId/',
param: {
tenantId: {
array: false
}
},
views: {
'header#': {
templateUrl: 'home/header.html',
controller: 'Header as vm'
},
'footer#': {
templateUrl: 'home/footer.html',
controller: 'FooterCtrl as vm'
}
},
resolve: userResolve,
data: {
private: true
}
})
//...4-5 other child states, then a state to handle unknown urls
.state('parentState.otherwise', {
views: {
'#': {
templateUrl: 'home/404/pageNotFound.html',
controller: 'PageNotFoundCtrl as vm'
}
}
});
$urlRouterProvider.otherwise(function ($injector) {
$injector.get('$state').go('parentState.otherwise', {}, {
location: false
});
});
Now, when an invalid URL is entered, parentState.otherwise state loads correctly, and parentState param, i.e. tenantId, is also correctly filled.
However, on page reload(refresh, Ctrl + R) with same invalid URL, parentState.otherwise state loads, but the problem is parentState param, i.e. tenantId is coming as empty string("").

Answer 1

Somehow, with location: false, the parent state, i.e. parentState in this case, was not picking up tenantId param from the URL on page refresh. So, if we explicitly pass tenantId param to child state, i.e. parentState.otherwise while opening it, everything works perfectly even on page refresh:
$urlRouterProvider.otherwise(function ($injector) {
$injector.get('$state').go('parentState.otherwise', {
tenantId: 'someTenantId'
}, {
location: false
});
});