Managing a large AngularJS application can be quite challenging when it comes to splitting it into functional modules. Currently, all the modules are loaded on the initial page load as they are bundled into a single JavaScript file. However, I am looking to optimize this by breaking down the bundle into different functional areas and loading parts of the application on demand when the user reaches specific points or views.
With the help of RequireJS and ocLazyLoad, I have managed to handle bundling and lazy loading. But there is one issue remaining. Since each module defines its own routes, if a module is not loaded initially, its routes will be undefined until the user navigates to that particular point triggering the loading of the module.
The main concern here is that the missing route can be accessed directly by entering its URL in the browser. In such cases, AngularUI Router will emit a $stateNotFound event. To address this, I have set up a handler that checks the requested URL and loads the appropriate module along with the missing routes. The final missing piece of the puzzle is how to retry the route after the module and routes have been loaded successfully. If anyone has any insights on how to achieve this, it would be greatly appreciated.