How to show child route with module in BottomNavigation in NativeScript Angular

Question

I am trying to load child module i.e HomeModule into BottomNavigation page-router-outlet and trying to use router-outlet of home.component.html as a parent of orderComponent.

So in conclude:

Lazy loading page.module into app component through page-router-outlet
Lazy loading homeModule into page component through BottomNavigation Page-router-outlet
Finally trying to load OrderComponent into HomeComponent by angular router-outlet

app.component.html

<page-router-outlet></page-router-outlet>

app-routing.component.ts

const routes: Routes = [
    { path: "", redirectTo: "/pages/default", pathMatch: "full" },
    { path: "login", component: LoginComponent },
    { 
        path: "pages",
        loadChildren: () => import('./pages/pages.module')
        .then(m => m.PagesModule) 
    },
];

page-router.module.ts

const routes: Routes = [
    { path: "default", component: PagesComponent, children: [
            { 
                path: "home",
                loadChildren: () => import('./home/home.module').then( m => m.HomeModule),
                component: NSEmptyOutletComponent,
                outlet: 'homeOutlet'
            },
            { 
                path: "account",
                loadChildren: () => import('./account/account.module').then( m => m.AccountModule),
                component: NSEmptyOutletComponent,
                outlet: 'accountOutlet'
            },
        ]
    },
    
];

pages.component.html

<TabStrip>
    <TabStripItem>
        <Label text="Home"></Label>
        <Image src="font://&#xf015;" class="fas"></Image>
    </TabStripItem>

    <TabStripItem class="special">
        <Label text="Account"></Label>
        <Image src="font://&#xf007;" class="fas"></Image>
    </TabStripItem>
</TabStrip>

<TabContentItem>
    <GridLayout>
        <Page-router-outlet name="homeOutlet"></Page-router-outlet>
    </GridLayout>
</TabContentItem>
<TabContentItem>
    <GridLayout>
        <Page-router-outlet name="accountOutlet"></Page-router-outlet>
    </GridLayout>
</TabContentItem>

home-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "@nativescript/angular";
import { HomeComponent } from "./home.component";
import { OrdersComponent } from "./orders/orders.component";

const routes: Routes = [
    { path: '', component: HomeComponent, children: [
        { path: 'orders', component: OrdersComponent}
    ]}
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class HomeRoutingModule { }

home.component.html

<StackLayout>
    <Label text="Home"></Label>
    <Button text="Tap me" (tap)="tapMe()"></Button>

    <router-outlet></router-outlet>
</StackLayout>

Tyler Blake Tyler Blake · Accepted Answer · 2020-11-04T15:16:48

I think you also need to do something like this in your pages.component.ts ngOnInit():

this._routerExtensions.navigate(
            [{
                outlets: {
                    homeOutlet: ["home"],
                    accountOutlet: ["account"]
                }
            }],
            { relativeTo: this._activatedRoute }
        );

I have a similar structured app as yours and this is the only difference I see.

If the tab is showing selected but the page is white, then it is likely just a routing issue.

Be careful with nested routes because of differences like navigate() doesn't use relative path but something like routerLink does.

How to show child route with module in BottomNavigation in NativeScript Angular

1 Answers