ui-router $urlRouterProvider wait until all states loaded

Question

I'm trying to dynamically load a bunch of states, by merging them from some disperse files.

I'm collecting all of them with $http.get and then add all with $stateProvider.state(name, config).

All ok here.

The problem is that if I enter another URL, besides the root URL "/", that same URL is never resolved to the correct state.

It seems that, if i load the app from the root state and navigate from there, the $urlRouterProvider can match with all the loaded states, but, if i try to enter the app from a child state, for example "/#/anotherpage", it cannot match any url/state and it fallback to .otherwise('/').

It's like if it tries to resolve the URL without waiting for all the states to be loaded.

I'm using $urlRouterProvider.deferIntercept() to try to stop it from continue, and after the configuration, i just enable again the sync.

app.config(configure).run(['$urlRouter', function($urlRouter){
        $urlRouter.sync();
        $urlRouter.listen();
    }]);

How do i make sure that $urlRouterProvider waits until all the states are loaded during .config(), and then try to match the correct state?

Thanks.

Answer 1

I'm not really sure that what i had is related but i'll post it : i was creating some object in a config phase. The object configuration was overridable so i couldn't built the state in the config phase of my provider. So i moved the $stateProvider calls and $urlRouterProviders calls in the $get of my provider.

If i tried to aim for one of the generated state it didn't work when loading the page the 1st time or refreshing. I had to use a "module.run(myProvider){}" to force instantiation of my provider to make it works. My guess is that my app.run was running before $urlRouterProvider resolves anything.

Another solution may be to use defer the bootstrap of your application removing ng-app and using angular.bootstrap when you're ready.