angulartypescriptionic-frameworkroutescomponents

When I change routes, the URL updates correctly, but the component for the route doesn't load

can someone help me? When I change routes, the URL updates correctly, but the component for the route doesn't load, and I can't figure out why.

I have an app.routes.ts file with a settings route that loads a set of routes from settings.routes.ts. Inside that, I have an account route, but when I navigate to this route, the component doesn't load.

// app.routes.ts

export const routes: Routes = [
    {
        path: '',
        redirectTo: 'tabs',
        pathMatch: 'full',
    },
    {
        path: 'tabs',
        loadChildren: () => import('./pages/tabs/tabs.routes').then(m => m.routes)
    },
    {
        path: 'club',
        loadComponent: () => import('./features/clovis-club/components/clovis-club/clovis-club.component').then((m) => m.ClovisClubComponent),
    },
    {
        path: 'settings',
        loadChildren: () => import('./features/settings/settings.routes').then(m => m.routes)
    },
];  

// settings.routes.ts
export const routes: Routes = [
    {
        path: '',
        component: SettingsComponent,
        children: [
            {
                path: '',
                redirectTo: '',
                pathMatch: 'full'
              },
            {
                path: 'account',
                loadComponent: () => import('./components/my-account/my-account.component').then( m => m.MyAccountComponent)
            },

        ],
    },

];

Solution

  • UPDATE:

    If you want routing at the same level, then move the children to the top level as shown below.

    // settings.routes.ts
export const routes: Routes = [
    {
         path: 'account',
         loadComponent: () => import('./components/my-account/my-account.component').then( m => m.MyAccountComponent)
    },
    {
        path: '',
        component: SettingsComponent,
    },
    {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
    },

];

    Make sure you have RouterOutlet import in SettingsComponent.

    Make sure you have <router-outlet/> in SettingsComponent HTML.

    Make sure you remove this line.

    {
    path: '',
    redirectTo: '',
    pathMatch: 'full',
}