still confused Routing and child Nativescript angular

Question

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.

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

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'

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