marklagendijk/ui-router.stateHelper

Can't resolve 'app.user.home' from state '' where user is a child abstract state of abstract state app

Opened this issue · 3 comments

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 ???