Nativescript + Angular, How do I reach child routes in a nested page router outlet?

Question

I would like to achieve tabview navigation in a NS + Angular 7 app.

Here is my current setup:

app-routing.module.ts:

...

const routes: Routes = [
    { path: '', redirectTo: '/login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: 'tabs', loadChildren: '~/app/tabs/tabs.module#TabsModule'; }
];

...

tabs.module.ts:

...
NativeScriptRouterModule.forChild([
            {   path: 'def',
                component: TabsComponent,
                children: [
                  {
                      path: 'market',
                      outlet: 'market',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/market/market.module#MarketModule'
                  },
                  {
                      path: 'list',
                      outlet: 'list',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/list/list.module#ListModule'
                  },
                  {
                      path: 'search',
                      outlet: 'search',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/search/search.module#SearchModule'
                  },
                  {
                      path: 'insight',
                      outlet: 'insight',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/insights/insights.module#InsightsModule'
                  },
                  {
                      path: 'explore',
                      outlet: 'explore',
                      component: NSEmptyOutletComponent,
                      loadChildren: '~/app/explore/explore.module#ExploreModule'
                  }
            ]}
          ])
...

and finally one of the 5 routing modules, lets go with list-routing.module.ts:

...
const routes: Routes = [
    { path: '', redirectTo: 'list' },
    { path: 'list', component: ListComponent },
    { path: 'all', component: ListListComponent }
]
...

I think I'm getting mixed up because of the tabs coming in only after you pass the login screen. After a successful login, I'm doing:

this.router.navigate(['tabs/def'], {
                        transition: {
                          name: 'fade',
                          duration: 100,
                          curve: 'linear'
                        },
                        clearHistory: true
                    }

this does get me into the market outlet, displaying my 'home' screen. And then if I do click on one of the tabs using:

tabs.component.html:

<TabView class="fal" style="font-size: 20; padding: 3;" >
    <page-router-outlet *tabItem="{title: 'home'}" name="market"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'clipboard-list'}" name="list"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'search'}" name="search"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'lightbulb'}" name="explore"></page-router-outlet>
    <page-router-outlet *tabItem="{title: 'newspaper'}" name="insight"></page-router-outlet>
</TabView>

I am then taken to the correct outlet. Here is where the problem is: List Component will load fine, but once I click on one of my lists, to get to ListListComponent, it tells me:

Error: Cannot match any routes. URL Segment: 'tabs/def'

The way I'm setting up this last navigation is:

this.router.navigate( [ { outlets: { list: [ '/all' ] } }], { relativeTo: this.route })

I've tried several combinations of passing in a URL of 'tabs/def/all' or 'tabs/def' with no success. As I understand it, I pass a URL at the beginning, but now that I'm nested, I should just go across the outlet. So is my syntax just way off on this last router.navigate?

Thank you so much for your help!!

Answer 1

Figured it out! You don't need to specify outlet in the feature module routing. For anyone else who finds this:

Feature routing module:

const routes: Routes = [
    {   path: '',
        component: ListComponent,
        children: [
            {
                path: '',
                children: [
                    {   path: '', redirectTo: 'all' },
                    {   path: 'all', component: ListListComponent },
                    {   path: 'group', component: ListgroupComponent },
                ]
            }
        ]
    }
];

list.component:

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

navigation from ListListComp -> ListgroupComp (triggered by tap on element):

this.router.navigate([ '../group' ], { relativeTo: this.route }