Marvin Heilemann Marvin Heilemann - 7 days ago 7
AngularJS Question

Cannot Resolve State with ui router

I'm trying to use ui router to set states after I pulled pages from a database, but It came up with this error every time I'm trying to click on a sref-link. Here are the app/app.js and the app/index.html.

angular.js:10467 Error: Could not resolve 'management' from state ''
at Object.z.transitionTo (angular-ui-router.min.js:7)
at angular-ui-router.min.js:7
at angular.js:19612
at e (angular.js:5964)
at angular.js:6243




(function () {
'use strict';

// global vars
var $stateProviderRef = null;
var $urlRouterProviderRef = null;

angular
.module('app', [
'loading',
'sidebar',
'prism',
'ui.router',
'permission',
'permission.ui',
'uiSwitch',
'smart-table',
'xeditable',
'angular.filter',
'ngFileSaver',
'ngtweet',
'ngLodash'
])
.config(config)
.run(run);

function config($stateProvider, $urlRouterProvider, $locationProvider) {
// create delay intercept
$urlRouterProvider.deferIntercept();

// TODO => do html5Mode
// $locationProvider.html5Mode(true);
// $locationProvider.hashPrefix('!');

// // default route
// $urlRouterProvider.otherwise(function($injector) {
// var $state = $injector.get("$state");
// $state.go('dashboard');
// });

$stateProviderRef = $stateProvider;
$urlRouterProviderRef = $urlRouterProvider;
}

function run(lodash, $http, $rootScope, $window, $location, $urlRouter, $sidebar, AdminService, ForumService, PermRoleStore, PermPermissionStore) {
var _ = lodash; // create LoDash
$rootScope.$sidebar = $sidebar; // make sidebar accessible in view

// add JWT token as default auth header
$http.defaults.headers.common['Authorization'] = 'Bearer ' + $window.jwtToken;

/**
* @name AdminService.GetPages
* @desc Creating new states for pages
* @param {null}
* @return {object} $stateProviderRef.state() - new state
*/
AdminService.GetPages().then(function (pages) {
$rootScope.pages = pages; // save all pages for view

// loop through each page and set state
$.each(pages, function(i, page){
// creating state object
var stateObj = {
url: `/${page.slug}`,
templateUrl: `${page.slug}/index.html`,
controller: `${page.name}.IndexController`,
controllerAs: 'vm',
data: {
icon: page.icon,
activeTab: page.name
}
};

// add permisions if set
if (page.perm) {
// create array from database strings
var permissions = $.map(page.perm.split(','), function(value){
return value.replace(' ','');
});

// reset the permissions in $rootScope
$rootScope.pages[i].perm = permissions;

stateObj.data.permissions = {
only: permissions,
redirectTo: `${page.redirect}`
}
} else {
// reset the permissions in $rootScope to an empty array
$rootScope.pages[i].perm = [];
}

// add page to state provider
$stateProviderRef.state(page.name, stateObj);
});

// sync the app
$urlRouter.sync();
$urlRouter.listen();
});

// TODO => Delete when AdminService works
PermRoleStore.defineManyRoles({
"Admin": function(){
return _.includes([1,5], $window.rankID);
},
"Management": function(){
return _.includes([2,3], $window.rankID);
},
"Member": function(){
return _.includes([2,3,4,6,9,10,11,12,13], $window.rankID);
},
"ESportManagement": function(){
return _.includes(11, $window.rankID);
},
"ESportMember": function(){
return _.includes(12, $window.rankID);
},
"SocialMedia": function(){
return _.includes(13, $window.rankID);
}
});

PermPermissionStore.definePermission('seeSettings', function (permission) {
return true;
});

// update active tab on state change
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
$rootScope.activeTab = toState.data.activeTab;
});
}

// manually bootstrap angular after the JWT token and decoded token is retrieved from the server
$(function () {
// get JWT token from server
$.get('/app/token', function (token) {
window.jwtToken = token;
}).then(function(e){
// get decoded token information
$.get('/app/decode', function (user) {
window.userID = user.id; // save id
window.rankID = user.rank; // save rank
angular.bootstrap(document, ['app']); // bootstrap app
});
});
});
})();

<!DOCTYPE html>
<html>
<head>
<title>Management - {{ activeTab }}</title>
<script>document.write('<base href="' + document.location + '"/>')</script>

<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- FAVICON -->
<link rel="icon" href="/images/favicon.png">

<!-- STYLE -->
<link href="/css/style.css" rel="stylesheet" />
</head>
<body>

<p>
<h5 ng-repeat="page in pages">
<a
ng-class="{ active: activeTab === page.name }"
ui-sref="{{ page.slug }}">
<span class="ion {{ page.icon }}" ng-if="page.icon"></span>{{ page.name }}
</a>
</h5>
</p>

<main role="main" ui-view></main>


<!-- Scripts
================================================== -->
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>

<!-- App
================================================== -->
<script src="app.js"></script>
<script src="settings/index.controller.js"></script>
<script src="dashboard/index.controller.js"></script>
<script src="management/index.controller.js"></script>
<script src="sheetcreator/index.controller.js"></script>

<!-- Services
================================================== -->
<script src="app-services/admin.service.js"></script>
<script src="app-services/forum.service.js"></script>
<script src="app-services/teamspeak.service.js"></script>
<script src="app-services/flash.service.js"></script>

<!-- Shared
================================================== -->
<script src="/bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="/bower_components/angular-permission/dist/angular-permission.min.js"></script>
<script src="/bower_components/angular-permission/dist/angular-permission-ui.min.js"></script>
<script src="/bower_components/angular-ui-switch/angular-ui-switch.min.js"></script>
<script src="/bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="/bower_components/angular-smart-table/dist/smart-table.min.js"></script>
<script src="/bower_components/angular-xeditable/dist/js/xeditable.min.js"></script>
<script src="/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="/bower_components/angular-file-saver/dist/angular-file-saver.bundle.min.js"></script>
<script src="/bower_components/ng-lodash/build/ng-lodash.min.js"></script>
<script src="/bower_components/ngtweet/dist/ngtweet.min.js"></script>
<script src="/bower_components/angular-filter/dist/angular-filter.min.js"></script>

<script src="/bower_components/prism/prism.js"></script>
<script src="/bower_components/prism/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="/bower_components/prism/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>

<script src="app-directives/loading.directive.js"></script>
<script src="app-directives/prism.directive.js"></script>

<script src="app-provider/sidebar.provider.js"></script>

</body>
</html>




Answer

In your ng-repeat you're using a page.slug in the ui-sref, but in the run function when creating the pages in the $stateProviderRef.state(page.name, stateObj); you're using page.name. I'm assuming page.slug should be correct since you have a management state from the ui-sref

Change $stateProviderRef.state(page.name, stateObj); to $stateProviderRef.state(page.slug, stateObj);

Comments