Angular ui-router and ocLazyLoad

Question

Scenario:

I have some angular modules like:

angular.module('app', ['app.core', 'app.views']); // not lazy load

Each module under app.views uses a RouterUtil to register their own route, like:

$stateProvider.state('state name', {/* some configs here */});

This RouterUtil also have a method to access all registered states (used to create a dynamic menu).

And I'm using the ocLazyLoad, just to load an external module. When the page is loading, ocLazyLoad will perform a request to other js with some angular modules, and then add this module to the actual enviroment.

The problem happens when I go to a page of this external module, and try refresh the page:

What is happening:

• Angular starts and register some $states
• ocLazyLoad starts a request for the external module
• ui-routes try parse the actual URL, and realizes that there is no state for this URL and redirect the user to default (otherwise) page
• ocLazyLoad finishs the request and add all new modules to angular enviroment. At this moment we have a state with the requested URL (same of before refresh)

Can I do ui-router wait for the ocLazyLoad request before check if this a registered URL?

Answer 1

you want to use deferIntercept(), in order to delay ui-router from watching the URL.

app.config(function($urlRouterProvider) {
  urlRouterProvider.deferIntercept(); 
});

... ocLazyLoad stuff

app.run(function($urlRouter) { 
  ocLazyLoadPromise.then(function() { urlRouter.listen(); }); 
});

http://angular-ui.github.io/ui-router/site/#/api/ui.router.router.$urlRouterProvider