1

In my Angular 14 app using standalone components, I'm not able to get a child route to work properly. I used this route configuration:

{
    path: 'clients',
    title: 'Existing Clients',
    loadComponent: () => import('./app/clients/client-list/client-list.component').then(x => x.ClientListComponent),
    children: [
        {
            path: ':id',
            loadComponent: () => import('./app/clients/client-edit/client-edit.component').then(x => x.ClientEditComponent)
        }
    ]
}

If I navigate to ".../clients" then the ClientListComponent properly loads. If I navigate to ".../clients/xyz" the browser shows the proper path, but the page is still the ClientListComponent instead of the ClientEditComponent.

What am I doing wrong here?

oguz ismail
  • 1
  • 16
  • 47
  • 69
Gargoyle
  • 9,590
  • 16
  • 80
  • 145

1 Answers1

0

Route Children /w Standalone Components

Make sure to import RouterModule in the imports array of your ClientListComponent and that there's a router-outlet.

I created some lazy loaded routes and it worked fine for me after some trial and error.

Here's my very simple Stackblitz I created in doing so for you to play with and compare with your application.

H3AR7B3A7
  • 4,366
  • 2
  • 14
  • 37