AngularJS - Unable to read the "navigable" property from undefined

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 details: [as a JSON representation, ignore 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 that Json has uppercase properties, but I do not use JSON, I just copied this from a violinist who got it from my web API.

I understand that the error "Unable to read the" navigable "property from undefined" means that I do not define the child state after determining the parent state, but I do not see where I do it.

Does anyone know a better way to structure app.run?

UPDATE:

I found my mistake, see below.

Answer 1

It is decided:

Indeed, the error occurred due to my creation of child states before setting the parent state.

I looked at my database and noticed the parent state of LAST in my que:

Id: 150
IsAbstract: 1
Name: "root"
ParentName: ""
.....

If I were convinced that at first this was a problem, this would not have happened.

Id: 1
IsAbstract: 1
Name: "root"
ParentName: ""
.....

I understand that this situation will not help many others, except as a reminder that your parent state is the first state in your loop when creating dynamic states / views

Answer 2

The code that you indicated above does not refer to the "navigation" code at all, so it cannot be the source of this error. Please include additional files where this link is made, or better yet, place Plunkr, which illustrates the problem.

I am posting this as an answer, not a comment, because there is additional information that can help you find the actual source of the error, and you will find that you do not need additional help when you find it. In Angular, it is often difficult to locate errors for location. Many of its mechanisms have “deep” call stacks, especially when an error is triggered by either an injector cycle or a digest. What you ultimately find is that the error itself occurs somewhere else where you think.

I think that most likely you encountered the same error that was reported here: https://github.com/angular-ui/ui-router/issues/488

It seems you are using AngularJS with Angular UI Router and Breeze, all together. The error reported is identical to yours, and if you re-examine your code and follow what others have reported in this thread, I think you will find that your problem is fixed ... but has little / nothing to do with your actual code above !

Answer 3

The problem here is due to the incorrect naming of the Upper and Lower JSON properties during 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 using F12)

Comparing fragments will 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 JSON is like this (see Uppercase at the beginning):

 "ViewStates": [{ "IsAbstract": false, "Name": "PersDboards01", "ParentName": "root", ... }, "Views": [{ "ControllerName": "MyDashboardCtrl", // ControllerName "Name": "container@", // Name "TemplateUrl": "dashboards/myDashboard", // Templateurl ... 

The working plunker plunger (just writing the result to the console) shows that the rest of the code should be working