Multi tool use

still confused Routing and child Nativescript angular

i am working with nativescript 4+ angular framework. i had done login and register component. but right now i get trouble with main component.

the tree is like this

app
{
main,
login,
register
}


then. main has canActivate the guard. if user don't login yet. user has to login first or create account.

canActivate

the problem is main component that has many childs.

my mainRouting is like this.

import { NgModule } from '@angular/core';
import { Routes } from '@angular/router';
import { NativeScriptRouterModule } from 'nativescript-angular/router';
import { MainComponent } from './main.component';
import { ProfileComponent } from './home/profile.component';
import { AddStoreComponent } from './home/add-store/add-store.component';
import { EditProfileComponent } from './home/edit-profile/edit-profile.component';
import { StoreComponent } from './store/store.component';
import { EditStoreProfileComponent } from './store/edit-store-profile/edit-store-profile.component';
import { GoodsComponent } from './store/goods/goods.component';
import { AddGoodsComponent } from './store/goods/add-goods/add-goods.component';
import { EditGoodsComponent } from './store/goods/edit-goods/edit-goods.component';
import { StaffComponent } from './store/staff/staff.component';
import { AddStaffComponent } from './store/staff/add-staff/add-staff.component';
import { EditStaffComponent } from './store/staff/edit-staff/edit-staff.component';
import { StoreProfileComponent } from './store/store-profile/store-profile.component';
import { TransactionComponent } from './store/transaction/transaction.component';
import { AddTransactionComponent } from './store/transaction/add-transaction/add-transaction.component';

const routes: Routes = [
{
path: '',
component: MainComponent,
children: [
{
path: '',
redirectTo: '/profile',
pathMatch: 'prefix'
},
{ path: 'profile', component: ProfileComponent },
{ path: 'edit-profile', component: EditProfileComponent },
{ path: 'add-store', component: AddStoreComponent },
{
path: 'store:id',
component: StoreComponent,
children: [
{
path: '',
redirectTo: '/store-profile',
pathMatch: 'full'
},
{ path: 'store-profile', component: StoreProfileComponent },
{
path: 'edit-store-profile',
component: EditStoreProfileComponent
},
{ path: 'goods', component: GoodsComponent },
{ path: 'edit-goods', component: EditGoodsComponent },
{ path: 'add-goods', component: AddGoodsComponent },
{ path: 'staff', component: StaffComponent },
{ path: 'edit-staff', component: EditStaffComponent },
{ path: 'add-staff', component: AddStaffComponent },
{ path: 'transaction', component: TransactionComponent },
{
path: 'add-transaction',
component: AddTransactionComponent
}
]
}
]
}
];

@NgModule({
imports: [NativeScriptRouterModule.forChild(routes)],
exports: [NativeScriptRouterModule]
})
export class MainRoutingModule {}


is my mainRouting good or suck?

my target is when i go to main component is automatically go to profile component

main component

profile component

but my code doest work.

i have tried change path : 'profile' to path : ''. it works. but i need to call '/profile' route and i want route '' to be my root for route '/main'

path : 'profile' to path : ''

'/profile' route

route ''

route '/main'

1 Answer
1

If you want to make your pattern work, you have to define a non-empty path on MainComponent meaning that all the subroutes show in the MainComponent layout. That is useful in case you have multiple layouts. But in your case you have only one layout, then you can simply put it in AppComponent and it allows you to get rid of the empty parent route that causes your problems

MainComponent

MainComponent

AppComponent

MainComponent

<router-outlet></router-outlet>

bootstrap: [AppComponent]

app.module.ts

<router-outlet></router-outlet>

AppComponent

path : 'profile'

path:''

''

/profile

MainComponent

AppComponent

MainComponent

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.