Angular Nativescript can't navigate in lazy module

Question

Template I used : Nativescript-Tabs-Template

When I try to navigate to sibling component (both are in one lazy module) with:

 showItem() {
    this.routerExtensions.navigate(["details/"]);
}

(also done this - not sure if this is ok ) :

this.routerExtensions.navigate(["details", { outlets: { searchTab: ['details'] } }]);

I get the error :

Error: Cannot match any routes. URL Segment: 'details'

*But when I navigate with nsRouterLink it works: *

<Label text="this works" [nsRouterLink]="['/details']></Label>

App.components.html Tab :

<TabView androidTabsPosition="bottom">
    <page-router-outlet
    *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
    name="searchTab">
    </page-router-outlet>
</TabView>

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"
    }
]

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 { }

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 { }

What Am I doing wrong ?

Maybe somehow I need to specify the outlet when I am navigating ? — Devla
– Devla, Commented Mar 19, 2019 at 12:50
this.routerExtensions.navigate(["details/"]); should be this.routerExtensions.navigate(["/details"]); — mast3rd3mon
– mast3rd3mon, Commented Mar 19, 2019 at 13:04
also, dont put anything outside the <page-router-outlet></page-router-outlet>, it should be the outermost tag — mast3rd3mon
– mast3rd3mon, Commented Mar 19, 2019 at 13:05

Edward Mwaura · Accepted Answer · 2019-07-02 05:52:59Z

1

have you tried this this.routerExtensions.navigate(["/search/details"]); include the parent route path before its child path

answered Jul 2, 2019 at 5:52

Edward Mwaura

1201 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felipe Aguiar · Accepted Answer · 2020-02-26 01:00:25Z

NativeScript Tabs Template is no longer recommended. Use this tutorial from NativeScript Blog:

https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation

And its example in GitHub:

https://github.com/NativeScript/login-tab-navigation-ng

In this example each tab has its own navigation tree and you can go back and forward independently (Like Facebook app does). Inside tabs every navigation is relative, so don't use something like ['/foo'].

constructor(
  private route: ActivatedRoute,
  private router: RouterExtensions
) { }

goForward() {
  const navigation: ExtendedNavigationExtras = {
    relativeTo: this.route,
    transition: {
    name: 'slide'
    }
  };

  this.router.navigate(['../foo'], navigation);
}

goBack() {
  this.router.back();
}

Collectives™ on Stack Overflow

Angular Nativescript can't navigate in lazy module

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related