Nativescript Angular TabView + <page-router-outlet> in a lazy loaded module

Question

I am using Nativescript-Angular (~7.1.0) to build a mobile app, in which App.component uses the RadSideDrawer navigation pattern and a lazy loaded module uses the TabView navigation pattern. (reference here: https://docs.nativescript.org/angular/core-concepts/angular-navigation).

The problem I ran into is that I am not able to implement a working route configurations in the lazy loaded module.

As a simplified example, my bootstrap component is in App module and the lazy loaded module is Admin module.

in app-routing.module.ts, my routes are defined below:

const routes: Routes = [
  { path: "admin", loadChildren: "~/app/admin/admin.module#AdminModule" },
  ...
];

in app.component.html, my template is defined as follows:

<RadSideDrawer ...>
  <GridLayout (tap)="goToModule('/admin')">
    ...
  </GridLayout>
  ...
</RadSideDrawer>

in admin-routing.module.ts, my child routes are defined as follows:

const routes: Routes = [
  { path: '', redirectTo: '/(tabOneOutlet:tabOnePath//tabTwoOutlet:tabTwoPath)', pathMatch: 'full' },
  { path: 'tabOnePath', component: TabOneComponent, outlet: 'tabOneOutlet' },
  { path: 'tabTwoPath', component: TabTwoComponent, outlet: 'tabTwoOutlet' }
];

admin.component template is defined as follows:

<TabView androidTabsPosition="bottom">
  <page-router-outlet *tabItem="{title: 'ONE'}" name="tabOneOutlet"></page-router-outlet>
  <page-router-outlet *tabItem="{title: 'TWO'}" name="tabTwoOutlet"></page-router-outlet>
</TabView>

The reason I want to use <page-router-outlet> in the Admin module is to have Forward and Backward navigation and take advantage of the Nativescript ActionBar widget, as I have multiple pages in the Admin module.

(according to Nativescript documentation - 'using a page-router-outlet comes with the added benefit of using the ActionBar widget in your component. On iOS, the widget automatically adds a back button when navigated to a second page. On Android, the page-router-outlet benefits from the hardware back button, which navigates back your components.')

With the above route configuration, Angular is throwing Error: Cannot match any routes. URL Segment: 'tabOnePath'

Here are some of the things I have tried.

1. I tried implementing the <TabView> directly in App.component.html, replacing the <RadSideDrawer> using dummy components. For example,

App.component.html

<TabView androidTabsPosition="bottom">
  <page-router-outlet *tabItem="{title: 'DUMMY ONE'}" name="dummyOneOutlet"></page-router-outlet>
  <page-router-outlet *tabItem="{title: 'DUMMY TWO'}" name="dummyTwoOutlet"></page-router-outlet>
</TabView>

App-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/(dummyOneOutlet:dummyOnePath//dummyTwoOutlet:dummyTwoPath)', pathMatch: 'full' },
  { path: 'dummyOnePath', component: DummyOneComponent, outlet: 'dummyOneOutlet' },
  { path: 'dummyTwoPath', component: DummyTwoComponent, outlet: 'dummyTwoOutlet' }
];

And it works.

2. Since redirectTo takes an absolute path, I have also tried different permutations of paths, but still getting Cannot match any routes error.

For now, I got the Admin module to work by directly embedding my Admin component selectors inside tab items and defining lateral routes in admin-routing.module.ts. But this is not exactly what I want.

Any help or a general direction would be really appreciated.

Answer 1

It looks like this article maybe useful

https://www.nativescript.org/blog/using-nested-router-outlets-with-nativescript-and-angular

It says that: "Named router outlets work only with router-outlet at the root, as page-router-outlet navigates to a whole different page each time we call navigate."

As I can see in the given examples you are trying to use <page-router-outlet> with named routes.