Recently, I utilized a template called Nativescript-Tabs-Template from this GitHub repository.
While attempting to navigate to a sibling component (both within the same lazy module), I encountered the following issue:
showItem() {
this.routerExtensions.navigate(["details/"]);
}
(I also tried the following method - not entirely certain if it is correct) :
this.routerExtensions.navigate(["details", { outlets: { searchTab: ['details'] } }]);
The error message received was:
Error: Cannot match any routes. URL Segment: 'details'
However, when using nsRouterLink for navigation, it works successfully:
<Label text="this works" [nsRouterLink]="['/details']></Label>
Within App.components.html's Tab section:
<TabView androidTabsPosition="bottom">
<page-router-outlet
*tabItem="{title: 'Search', iconSource: getIconSource('search')}"
name="searchTab">
</page-router-outlet>
</TabView>
In Router.module.ts:
const routes: Routes = [
{
path: "",
redirectTo: "/(homeTab:home/default//browseTab:browse/default//searchTab:search/default)",
pathMatch: "full"
},
{
path: "search",
component: NSEmptyOutletComponent,
loadChildren: "~/app/search/search.module#SearchModule",
outlet: "searchTab"
}
]
For Search.module.ts:
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { SearchRoutingModule } from "./search-routing.module";
import { SearchComponent } from "./search.component";
import { NgShadowModule } from 'nativescript-ng-shadow';
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { LabelMaxLinesDirective } from "../directives/label-max-lines.directive";
import { ItemDetailComponent } from "./item-detail/item-detail.component";
@NgModule({
imports: [
NativeScriptCommonModule,
SearchRoutingModule,
NgShadowModule,
NativeScriptFormsModule,
],
declarations: [
SearchComponent,
LabelMaxLinesDirective,
ItemDetailComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class SearchModule { }
And in Search.router.module.ts:
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { SearchComponent } from "./search.component";
import { ItemDetailComponent } from "./item-detail/item-detail.component";
const routes: Routes = [
{ path: "default", component: SearchComponent },
{ path: "details", component: ItemDetailComponent }
];
@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class SearchRoutingModule { }
Any insights on what might be going wrong in my implementation?