CODEWITHSUNDEEP
angularangular2-nativescript
Zoidy
Zoidy

Reputation: 384

Routing to module within a component

The app is divided into feature modules. Every 'page' is loaded in a SideMenu component (so that all the pages have navigation displayed). The structure of navigation is done like this:

<page-router-outlet>
    <side-menu>
        <router-outlet>
        </router-outlet>
    </side-menu>
</page-router-outlet>

Page-router-outlet is a specific router-outlet for NativeScript, it shouldn't make any difference in this case though.

This is the routing config:

{
    path: 'view',
    component: SideMenu,
    children: [
        {path: '', component: MyPage },
        {
            path: 'some/path/:id',
            pathMatch: 'full',
            loadChildren: () => MyModule
        },
    ]
}

When I navigate to anything withing the AppModule, it works fine - it is loaded in the router-outlet. When I navigate to the other module though, the side menu disappears - looks like when I navigate out of the AppModule, navigation is done on the page-router-outlet, instead of the inner one.

How can I achieve same behavior when routing to other modules?

Upvotes: 1

Views: 339

Answers (1)

Zoidy
Zoidy

Reputation: 384

Main module routing:

{
    path: 'view',
    component: SideMenu,
    children: [
        {
            path: 'path/myModule',
            loadChildren: () => MyModule
        },
    ]
},
{
    path: 'modules/myModule',
    redirectTo: 'view/path/myModule'
}

myModule routing is simple with no children like so:

{
    path: 'reports',
    component: ReportPage,
}

Problem was probably in the

pathMatch:full

Upvotes: 0

Related Questions