I navagate from main/tv-theke-page to main-tvtheke/main-tvtheke-home-page,
but when i press back in android does not navigate back to main/tv-theke-page it exits from app
It seems is something wrong with route history
const routes: Routes = [
{ path: '', redirectTo: '/main', pathMatch: 'full' },
{ path: 'main', component: MainComponent ,
children : [
{ path: '', component: HomePageComponent},
{ path: 'search-page', component: SearchPageComponent},
{ path: 'home-page', component: HomePageComponent},
{ path: 'live-tv-page', component: LiveTvPageComponent},
{ path: 'tvtheke-page', component: TvThekePageComponent},
{ path: 'music-page', component: MusicPageComponent},
{ path: 'movie-page', component: MoviePageComponent},
{ path: 'tv-show-page', component: TvShowPageComponent},
{ path: 'favorite-page', component: FavoritePageComponent},
]},
{ path: 'main-movie', component: MainMoviePageComponent},
{ path: 'main-tvshow', component: MainTVShowPageComponent},
{ path: 'main-tvtheke', component: MainTVThekeComponent ,
children : [
{ path: '', component: MainTVThekeHomePageComponent},
{ path: 'main-tvtheke-home-page', component: MainTVThekeHomePageComponent},
{ path: 'main-tvtheke-dailyvdeos-page', component: MainTVThekeDailyVideosComponent},
{ path: 'main-tvtheke-rubric-page', component: MainTVThekeRubricComponent},
{ path: 'main-tvtheke-az-page', component: MainTVThekeAZComponent},
]},
]
That really depends on how you navigation logic looks.
I would suggest you create a playground with your sample here:
https://play.nativescript.org/
Also, you might get more info by enabling router tracing in you app-routing.module
#NgModule({
imports: [
NativeScriptRouterModule.forRoot(routes, {
enableTracing: true,
Related
i started a new project with nativescript-angular (8.20.4). I'm facing an issue regarding the use of modules lazy loading. I managed to only get the first page (login) displayed using lazy loading. The bottom nav bar is displayed but the pages inside it are not loaded or displayed.
app-routing.module.ts
const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
//{ path: "", redirectTo: "/bottomnav", pathMatch: "full" },
//{ path: "login", component: LoginComponent},
{ path: "login", loadChildren: () => import('./modules/login/login.module').then(m => m.LoginModule)},
{ path: "bottomnav", loadChildren: () => import('./modules/bottomnav/bottomnav.module').then(m => m.BottomnavModule)},
];
#NgModule({
imports: [NativeScriptRouterModule.forRoot(routes, { enableTracing: true })],
exports: [NativeScriptRouterModule]
})
I probably forgot a declaration or something else but i can't figure it out.
The sample project is available on github : https://github.com/npmnewbie/ns-bottomnav-withlogin/
bottomnav-routing.module.ts
const routes: Routes = [
{ path: "", redirectTo: "bottomnav", pathMatch: "full" },
{ path: "bottomnav", redirectTo: "/(browse:browse//search:search)", pathMatch: "full" },
{
path: "browse",
component: NSEmptyOutletComponent,
outlet: "browse", loadChildren: () => import('../browse/browse.module').then(m => m.BrowseModule)
},
{
path: "search",
component: NSEmptyOutletComponent,
outlet: "search" , loadChildren: () => import('../search/search.module').then(m => m.SearchModule)
},
];
#NgModule({
imports: [NativeScriptRouterModule.forChild([{path: "", component: BottomnavComponent, children: routes}]),],
exports: [NativeScriptRouterModule]
})
export class BottomnavRoutingModule { }
bottomnav.module.ts
#NgModule({
declarations: [BottomnavComponent],
imports: [
BottomnavRoutingModule,
NativeScriptCommonModule,
],
exports: [NativeScriptRouterModule],
schemas: [NO_ERRORS_SCHEMA]
})
export class BottomnavModule { }
Thanks in advance for your help.
Image Login page
Image Tab nav bar empty page
Edit : my project is based on playground based project
I am using this (https://www.nativescript.org/blog/implementing-a-login-for-nativescript-apps-with-tab-based-navigation) git (https://github.com/NativeScript/login-tab-navigation-ng)
app-routing.module.ts
const routes: Routes = [
{
path: "",
redirectTo: "/tabs/default",
pathMatch: "full"
},
{
path: "login",
component: LoginComponent
},
{
path: "tabs",
loadChildren: "~/app/tabs/tabs.module#TabsModule",
canActivate: [AuthGuard]
},
];
tabs.module.ts
NativeScriptRouterModule.forChild([
{
path: "default", component: TabsComponent, children: [
{
path: "events",
outlet: "eventTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/event/events.module#EventsModule",
},
{
path: "notifications",
outlet: "notificationTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/notifications/notifications.module#NotificationsModule",
},
{
path: "profile",
outlet: "profileTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/profile/profile.module#ProfileModule",
},
{
path: "info",
outlet: "infoTab",
component: NSEmptyOutletComponent,
loadChildren: "~/app/info/info.module#InfoModule",
}
]
}
])
notifications.module.ts
NativeScriptRouterModule.forChild([
{ path: "", redirectTo: "notifications" },
{ path: "notifications", component: NotificationsComponent },
]),
In notifications view i have list with records, when i click on the record i want to redirect to events tab. I tried many ways but nothing works :(
for example, with this I have no errors, but redirect also not working
this.routerExtensions.navigate([
'tabs/default', { outlets: { eventTab: ["events"] } }
])
Do You have any ideas?
I have app-routing.module.ts
const routes: Routes = [
{ path: "", redirectTo: "/fp", pathMatch: "full" },
{ path: "home", loadChildren: "~/app/home/home.module#HomeModule" },
{ path: "login", loadChildren: "~/app/accounts/login/login.module#LoginModule" },
{ path: "register", loadChildren: "~/app/accounts/registers/registers.module#RegistersModule" },
{ path: "fp", loadChildren: "~/app/accounts/first_page/first_page.module#FirstPageModule" },
];
export const routing = NativeScriptRouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules});
In Home Component I have home-routing.module.ts
const routes: Routes = [
{ path: "", component: HomeComponent }
];
In LoginComponent I have login-routing.module.ts
const routes: Routes = [
{ path: "", component: LoginComponent }
];
In RegisterComponent I have resgister-routing.module.ts
const routes: Routes = [
{ path: "", component: RegistersComponent }
];
In RegisterComponent I have first_page-routing.module.ts
const routes: Routes = [
{ path: "", component: FirstPageComponent }
];
I create a authguard like this:
canActivate(): boolean {
if (this.auth.isAuthenticated()) {
console.log('true')
return true;
}
this.router.navigate(['/login']);
console.log('false')
return false;
}
My question is, how to use AuthGuard in my routing?
You can try and add the guard in the app routing module:
const routes: Routes = [
{ path: '', redirectTo: '/fp', pathMatch: 'full' },
{ path: 'home', loadChildren: '~/app/home/home.module#HomeModule' },
{
path: 'login',
loadChildren: '~/app/accounts/login/login.module#LoginModule'
},
{
path: 'register',
loadChildren:
'~/app/accounts/registers/registers.module#RegistersModule'
},
{
path: 'fp',
loadChildren:
'~/app/accounts/first_page/first_page.module#FirstPageModule',
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
}
];
... assuming you only want to protect the fp path.
I have an application in nativescript which when you are browsing, has delay. then its operation is correct but then it stops when you are navigating.
I do not know the reason for the delay of the application since it is simple navigation
this is the routing
const routes: Routes = [
{
path: "", redirectTo: "/login", pathMatch: "full",
},
{
path: "login", loadChildren: "./login/login.module#LoginModule"
// path: "login", component: LoginComponent,
},
{
path: "mesas", loadChildren: "./mesas/mesas.module#MesasModule"
// path: "mesas", component: MesasComponent,
},
{
// path: "home", loadChildren: "./home/home.module#HomeModule"
path: "home", component: HomeComponent,
},
{
path: "comanda", loadChildren: "./comanda/comanda.module#ComandaModule"
// path: "comanda", component: ComandaComponent,
},
{
// path: "subP-Mod", loadChildren: "./comanda/modificadores.module#ModificadoresModule"
path: "subP-Mod", component: ModificadoresComponent,
},
{
// path: "nOrden", loadChildren: "./orden/nueva.module#NuevaModule"
path: "nOrden", component: NOrdenComponent
},
{
// path: "meseros", loadChildren: "./meseros/meseros.module#MeserosModule"
path: "meseros", component: MeserosComponent
},
{
// path: "comensales", loadChildren: "./comensales/comensales.module#ComensalesModule"
path: "comensales", component: ComensalesComponent
},
{
//path: "prodlibre", loadChildren: "./productoLibre/prodlibre.module#ProdLModule"
path: "prodlibre", component: ProdLComponent
},
{
// path: "razonDet", loadChildren: "./razonesCancela/razonDetC.module#razonDetModule"
path: "razonDet", component: RazonesComponent
},
];
Try using "markingMode": "none", as described here. There are a few drawbacks, but the navigation should feel much snappier
I have an issue with routing in NativeScript 3.4 that drives me nuts. The idea of this test project is that the root app component is using a <page-router-outlet> and then using nested angular routing using <router-outlet> it loads a login parent and child, through which I am navigating to a main page which has two child routes.
If I route from the login.child.ts to the main parent/child with this.router.navigate(['/main']); then everything works fine and I continue alternating between the two children.
However, if I route to the main with clearing history this.router.navigate(['/main'],{ clearHistory: true });, which is what I want because after login I don’t want the user to be able to “go back” to the login, then I am correctly reaching the main parent with the first child, but then am unable to navigate to the other child.
Any ideas as to what I am doing wrong?
This is the routing I am using:
const routes: Routes = [
{ path: "", redirectTo: "login", pathMatch: "full" },
{ path: "login", component: LoginParent,
children: [
{ path: "", redirectTo: "loginchild", pathMatch: "full" },
{ path: "loginchild", component: LoginChild },
]
},
{ path: "main", component: MainParent,
children: [
{ path: "", redirectTo: "mainchild", pathMatch: "full" },
{ path: "mainchild", component: MainChild },
{ path: "otherchild", component: OtherChild },
]
}
];
Edit: when I wrap the main route in a component that contains a <page-router-outlet> like below then it all start working. It seems however a bit cumbersome. I would be happy to understand how this can be more neat (perhaps the changes in NativeScript 4 allow for easier handling)?
const routes: Routes = [
{ path: "", redirectTo: "login", pathMatch: "full" },
{ path: "login", component: LoginParent,
children: [
{ path: "", redirectTo: "loginchild", pathMatch: "full" },
{ path: "loginchild", component: LoginChild },
]
},
{ path: "main", component: AppComponent,
children: [
{ path: "", component: MainParent,
children: [
{ path: "", redirectTo: "mainchild", pathMatch: "full" },
{ path: "mainchild", component: MainChild },
{ path: "otherchild", component: OtherChild },
]
}
]
}
];