Cannot read property 'navigable' of undefined

[theJoeBiz]

So basically, "If the parent doesn't exist (yet), it can't have children". This feels more like a feature request than an issue because it's probably an edge case, but here's what I'm encountering:

I'm building a rather large angular app that takes advantage of angular's modules that require other modules, etc. The issue is that we are unable to register a child state in a dependency module because the dependency module runs first and spits out "Cannot read property 'navigable' of undefined". Here is the plunkr and here is the problematic code all in one place:

angular.module('myapp', ["ui.router", "myapp.parent"])
.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/parent");
});

angular.module('myapp.parent', ["myapp.parent.child"])
.config(function($stateProvider) {
    $stateProvider.state('parent', {
        url: "/parent",
        templateUrl: "parent.html"
    });
});

angular.module('myapp.parent.child', [])
.config(function($stateProvider){
    // Throws exception
    // "Cannot read property 'navigable' of undefined"
    $stateProvider.state('parent.child', {
        url: "/child",
        templateUrl: "child.html"
    });
});

Currently we're getting around the exception by using a $customStateProvider that basically wraps $stateProvider and waits until the parent is registered to register the child. If the parent never gets registered, neither does the child.

[robbyronk]

I don't think this is an edge case and is probably something that many developers who structure their apps using modules run in to. Allowing the child to be registered before its parent makes sense.

👍

[timkindberg]

Duplicate #486. Please move your discussion over there.

There is currently a way to do this, you have to have reverse module dependencies, where children depend on parent modules (instead of vice versa which you would expect).