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'
Error: Cannot match any routes. URL Segment: 'tabOnePath'
Here are some of the things I have tried.
<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.
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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.