ui-router.stateHelper
ui-router.stateHelper copied to clipboard
Can't resolve 'app.user.home' from state '' where user is a child abstract state of abstract state app
After trying to use the stateHelper to reorganize my app's menu layout I'm getting an error;
Error: Could not resolve 'app.user.home' from state ''
at Object.transitionTo (ionic.bundle.js:49177)
at Object.go (ionic.bundle.js:49110)
at app.js:220
This happens when my app loads and $state.go('app.user.home')
runs on app.js:220
My situation is that admin users are shown a "hamburger stack" icon that opens a side menu with certain views only admins can navigate to.
When a non-admin enters the same view they are shown a "home" icon instead that links to the home view.
Both admins and non-admins have the home view which has ui-sref
links to additional views they can both navigate to.
When the "hamburger icon" is shown for an admin the ui-sref
to the home view is moved to the side menu.
This is my stateHelperProvider
code;
.config(function(stateHelperProvider, $urlRouterProvider, $ionicConfigProvider) {
stateHelperProvider
.state({
name: 'app',
url: '/',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'MenuCtrl',
})
.state({
name: 'app.user',
url: '/user',
abstract: true,
children:[
{
name: 'app.user.home',
url: '/home',
templateUrl: 'templates/landing.html',
controller: 'HomeCtrl'
},
{
name: 'app.user.board',
url: '/board',
templateUrl: 'templates/pta-board.html',
controller: 'BoardCtrl'
},
{
name: 'app.user.events',
url: 'events',
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
},
{
name: 'app.user.chatrooms',
url: '/chat-rooms',
templateUrl: 'templates/chat-rooms.html',
controller: 'RoomsCtrl',
children:[
{
name: 'app.user.chatrooms.chatroom',
url: '/room',
templateUrl: 'templates/chat-room.html',
params:{
roomId: null,
chatters: null
},
controller: 'ChatCtrl'
}
]
},
{
name: 'app.user.profile',
url: '/profile',
templateUrl: 'templates/user-profile.html',
params:{
isNewUser: null
},
controller: 'UserCtrl'
},
{ name: 'app.user.admin',
url: 'admin',
abstract: true,
children:[
{
name: 'app.user.admin.calendar',
url: '/calendar',
params:{
selectedEvent: null,
calendarTitle: 'Volunteer',
isVolunteerSignup: true
},
templateUrl: 'templates/rcalendar.html',
controller: 'CalendarCtrl'
},
{
name: 'app.user.admin.volunteers',
url: '/volunteers',
params:{
thisHoursVolunteers: null,
thisEvent: null
},
templateUrl: 'templates/admin-interact.html',
controller: 'VolunteerCtrl'
},
{
name: 'app.user.admin.roles',
url: '/roles',
templateUrl: 'templates/roles.html',
controller: 'RoleCtrl'
},
{
name: 'app.user.admin.settings',
url: '/settings',
templateUrl: 'templates/settings.html',
controller: 'SettingsCtrl'
}
]
}
]
})
.state({
name: 'login',
url: '/login',
templateUrl: 'templates/login.html',
controller : 'LoginCtrl'
})
.state({
name: 'signup',
url: '/signup',
templateUrl: 'templates/signup.html',
controller : 'SignupCtrl'
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/home');
$ionicConfigProvider.scrolling.jsScrolling(false);
});
My side menu, menu.html, template;
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar ng-class="{'has-subject': subject}"
class="white-font bar-header bar-positive">
<!-- <ion-nav-back-button></ion-nav-back-button> -->
<ion-nav-buttons side="left" >
<button ng-if="$root.isAdmin" class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
<button ng-if="!$root.isAdmin" class="button button-icon button-clear ion-home" ui-sref="app.user.home">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view> <!-- ionic's equivalent to ui-view -->
</ion-side-menu-content>
<ion-side-menu class="side-menu" width="140" side="left">
<ion-header-bar class="white-font bar-header bar-positive">
<h1 class="title">Admin Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.admin.calendar({ calendarTitle: 'Calendar', isVolunteerSignup: false })">Calendar</a>
</ion-item>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.admin.roles">Roles</a>
</ion-item>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.home">Main Menu</a>
</ion-item>
<ion-item menu-close>
<a class="button button-block button-clear button-dark" ui-sref="app.user.admin.settings">School Settings</a>
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
And then my home view;
<ion-view class="landing" title="{{school.name}}">
<div ng-if="school.logo" class="tall bar bar-header">
<img class="school-logo" ng-src="{{school.logo}}" >
</div>
<ion-content ng-class="{'has-tall-header': school.logo}">
<ion-list class="nav-buttons">
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.board">
PTA Board
<i class="icon ion-board"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.events">
Events
<i class="icon ion-calendar"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.rooms">
Chat
<i class="icon ion-chatboxes"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ui-sref="app.user.profile">
Profile
<i class="icon ion-android-user-menu"></i>
</a>
</ion-item>
<ion-item>
<a class="button button-block button-clear button-dark" ng-click="logout()">
Logout
<i class="icon ion-log-out"></i>
</a>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Hi, try adding { keepOriginalNames: true }
Hello guys. Did the answer provided by @Froxz work for you?
Hi, { keepOriginalNames: true } its working ???