While working on an application with my team, we've noticed some inconsistent behavior. When a user refreshes the browser, the page UI state is fully refreshed, but only up to a certain route.
Our application starts on the /Home route, establishing the overall setup and component hierarchy. The user navigates through A.A, A.B, A.C, all of which work fine. B.A also works correctly.
However, trouble arises when refreshing from B.B or B.C, as it redirects back to B.A. We expect the end-user to be redirected to B.B or B.C if they refresh from those pages.
Routes.ts
$stateProvider
.state('Home',
{
url: '/Home',
templateUrl: 'App/Home/home.html',
controller: 'homeCtrl',
controllerAs: '$ctrl'
})
// Other route configurations here...
We utilize a component for our routing.
Relevant HTML:
<order-navigation validate-view="$ctrl.validate(someForm)"
previous-route="A.C"
previous-button-text="previous"
next-route="B.A"
next-button-text="continue">
</order-navigation>
Order Navigation Component Controller:
export class OrderNavigationCtrl implements angular.IController {
//#region Variables / Properties
// Controller functionality here...
I've thoroughly checked the HTML for each page and found no typos causing the redirect issue. As we use a common component, any flaw in the controller should affect all pages equally, which is not the case here.
Questions:
A: What could be causing B.B and B.C to redirect to B.A instead of themselves?
B: How can I modify this to ensure that B.B and B.C redirect to their respective routes?
Possible Workaround: Research suggests using localStorage and .run() to cache the UI router state. Ideally, routing should work without additional measures. If there's something incorrect in our implementation, I need to address it.