Issue with lazy loaded angularjs child module with routes (states)

75 Views Asked by At

I'm working with an angularjs + ui-router application which is a shell application of my other angularjs application (basically header + footer + sidenav). Each application I'm developing is complied and stored as an npm library which eventually being used as a dependency in package.json of my shell application. when shell application is loaded it's decide which of my other application should be rendered inside as a ui-view content by the state that defined in the shell application.

This is the shell application state definitions:

    $stateProvider
    .state('content', {
        url: '/:appName', ...

There are some other states defined in the child application which uses the "content" state as a parent state, for example:

$stateProvider.state('child', {
url: '/child1',
parent: 'content',
component: 'childComponent'});

Routing works as expected only after everything is already loaded. The problem is that on every browser refresh, the shell application loads first, at that certain point the following route for example: http://localhost:8000/#/childapp1/chid1 is not a valid route since the child routes (states) is not loaded yet. The only solution I came with is stored the url in a global variable the then use it as a "return url" pattern, which works. I was wondering if there is a better solution for the my problem.

Appreciate your help,

N

0

There are 0 best solutions below