AngularJS - Cannot read property 'navigable' of undefined - angularjs

Question

My app.run:
app.run([
'$q', '$rootScope', '$state', 'settings', 'datacontext',
function ($q, $rootScope, $state, settings, datacontext) {
settings.currentLang = settings.languages[0];
breeze.core.extendQ($rootScope, $q);
datacontext.getSideMenuItems().then(function (data) {
var startUp = undefined;
var rootUrl = '/app/views/';
/// this is the upper level used for side menu only
angular.forEach(data, function (value) {
// now loop thru the data for the $state items
angular.forEach(value.viewStates, function (viewState, key) {
if (key == 0) {
startUp = viewState.name;
}
var state = {
"url": '/' + viewState.name,
"parent": viewState.parentName,
"abstract": viewState.isAbstract,
"views": {}
};
angular.forEach(viewState.views, function (view) {
state.views[view.name] = {
controller: view.controllerName,
templateUrl: rootUrl + view.templateUrl + '.html'
};
});
$stateProviderRef.state(viewState.name, state);
});
$state.go(startUp);
});
});
}
My Data: [as JSON representation, ignore the Capitalization, breeze renames them lowercase]
[{
"$id": "1",
"Id": 2,
"Icon": "fa-home",
"IsActive": "active",
"IsShared": false,
"OrderNum": 1000,
"Title": "Dashboards",
"FK_DbModuleId": 1,
"DBoardModule": null,
"ViewStates": [
{
"$id": "2",
"Id": 2,
"IsAbstract": false,
"Name": "PersDboards01",
"ParentName": "root",
"OrderNum": 1,
"FK_ViewGroupId": 2,
"ViewGroup": {
"$ref": "1"
},
"Views": [
{
"$id": "3",
"Id": 4,
"ControllerName": "MyDashboardCtrl",
"Name": "container#",
"TemplateUrl": "dashboards/myDashboard",
"FK_ViewStateId": 2,
"ViewState": {
"$ref": "2"
}
},
{
"$id": "4",
"Id": 5,
"ControllerName": "LeftPanelCtrl",
"Name": "leftPanel#",
"Title": "null",
"TemplateUrl": "shell/html/left-panel",
"FK_ViewStateId": 2,
"ViewState": {
"$ref": "2"
}
}
]
}
]
I know the Json has the properties capitalized but I am not really using JSON, I just copied this off of fiddler which got it from my Web API.
I understand that the error "Cannot read property 'navigable' of undefined" means I am not defining the child state after I define the parent state, but I cannot see where I am doing that.
Does anyone know a better way to structure the app.run?
UPDATE:
I found my error, see below.

Answer 1

Solved:
Indeed the error was due to my creating child states before establishing the parent state.
I looked at my database and noticed the parent state LAST in my que:
Id : 150
IsAbstract : 1
Name: "root"
ParentName: ""
.....
Had I made sure to make it first the problem would not have occured.
Id : 1
IsAbstract : 1
Name: "root"
ParentName: ""
.....
I recognize this situation will not help many other than as a reminder to make sure your parent state is the first state in your loop when creating dynamic states/views

Answer 2

The code you included above does not reference 'navigable' at all, so it cannot be the source of this error. Please either include the additional files where that reference is being made, or better still, post a Plunkr that illustrates the problem.
I'm posting this as an answer rather than a comment because there's an additional detail that may help you find the actual source of the error, and you may find that you don't need any further help when you find it. In Angular it's very common for error locations to be hard to find. Many of its mechanisms have "deep" calls stacks, especially when an error is triggered either by the injector or digest cycle. What you end up finding is that the error itself is happening somewhere else from where you think it is.
I think that it is likely you are encountering the same error reported here:
https://github.com/angular-ui/ui-router/issues/488
You appear to be using AngularJS with Angular UI Router and Breeze, all together. The error reported there is identical to yours, and if you re-examine your code and follow what the others reported on that thread I think you will find that your problem is fixable... but has little/nothing to do with your actual code above!

Answer 3

The issue here is related to wrong Upper and Lower case JSON property naming during the processing. There is a working plunker - which calls console.log(state) at the end of JSON processing.. to show the result (do not foget to start the console with F12)
A snippet comparison would be like this
angular.forEach(response.data, function (value) {
// NO viewStates
// but ViewStates
angular.forEach(value.ViewStates, function (viewState, key) {
if (key == 0) {
startUp = viewState.Name; // instead of name
}
var state = {
"url": '/' + viewState.Name, // instead of name
"parent": viewState.ParentName, // instead of parentName
"abstract": viewState.IsAbstract, // instead of isAbstract
"views": {}
};
// No views
// but Views
angular.forEach(viewState.Views, function (view) {
state.views[view.Name] = {
controller: view.ControllerName, // instead of controllerName
templateUrl: rootUrl + view.TemplateUrl + '.html'
};
});
$stateProviderRef.state(viewState.Name, state); // instead of name
console.log(state)
});
});
because the JSON is like that (see Upper case at the begining):
"ViewStates": [{
"IsAbstract": false,
"Name": "PersDboards01",
"ParentName": "root",
...
},
"Views": [{
"ControllerName": "MyDashboardCtrl", // ControllerName
"Name": "container#", // Name
"TemplateUrl": "dashboards/myDashboard", // Templateurl
...
The working plunker plunker (just loging the result into console) shows that the rest of the code should be working