Angular.js configuring ui-router child-states from multiple modules
I finally chose this approach which does the job for me:
// add all your dependencies here and configure a root state e.g. "app"angular.module( 'ngBoilerplate', ['ui.router','templates-app','templates-common','etc','etc']);// configure your child states in here, such as app.foo, app.bar etc.angular.module( 'ngBoilerplate.foo', ['ngBoilerplate']);angular.module( 'ngBoilerplate.bar', ['ngBoilerplate']);// tie everything together so you have a static module name// that can be used with ng-app. this module doesn't do anything more than that.angular.module( 'app', ['ngBoilerplate.foo','ngBoilerplate.bar']);and then in your app index.html
<html ng-app="app">
In the documentation the feature1 module depends on the application module. Try
angular.module( 'ngBoilerplate.foo', ['ngBoilerplate'])
I would of just commented but i do not have the rep. I know this is old but i had the same problem and came across this. One thing i am confused about is in app.js you do not import "ngBoilerplate.foo" but ngBoilerplate.library instead. I had the same problem and my solution was to inject sub modules into the top module instead of their parent.
My structure was module('ngBoilerplate'), module('ngBoilerplate.foo') and module('ngBoilerplate.foo.bar')'. I was injecting ngBoilerplate.foo.bar into ngBoilerplate.foo and the $stateProvider was failing. I needed to inject ngBoilerplate.foo.bar into top level ngBoilerplate.
I thought i would put this here in case anyone else sees this. The error i had was Uncaught TypeError: Cannot read property 'navigable' of undefined from ngBoilerplate.foo