Cannot match children routes of blank path

Question

I have this configuration in my routing in Angular:

...
{
          path: 'account',
          canActivate: [AuthGuardService],
          children: [
            {
              path: '',
              component: AccountPageComponent,
              outlet: 'modal',
              children: [
                {
                  path: 'pets',
                  component: PetsComponent,
                  children: [
                    {
                      path: ':id',
                      component: PetComponent,
                    }
                  ]
                },
                {
                  path: 'user',
                  component: UserComponent,
                }
              ]
            }
          ]
        }
...

Account route is working as expected and opening in desired outlet. AccountPageComponent has his own nameless outlet for this route children. But when I'm navigating to any of them I'm receiving following errors:

NG04002: Cannot match any routes. URL Segment: 'account/user'

NG04002: Cannot match any routes. URL Segment: 'account/pets'

How can I fix this?

Thanks

Naren Murali · Accepted Answer · 2025-03-14 10:02:07Z

2

You should navigate using the outlet name - modal:

this.router.navigate(['account', { outlets: { modal: ['pets', '1'] } }]);

this.router.navigate(['account', { outlets: { modal: ['user'] } }]);

In HTML it will be:

<a [routerLink]="['account', { outlets: { modal: ['pets', '1'] } }]">Pet 1</a>
<a [routerLink]="['account', { outlets: { modal: ['user'] } }]">User</a>

The redirection might look like:

{
      path: 'account',
      canActivate: [AuthGuardService],
      children: [
        {
          path: '',
          component: AccountPageComponent,
          outlet: 'modal',
          children: [
            {
              path: 'pets',
              component: PetsComponent,
              children: [
                {
                  path: ':id',
                  component: PetComponent,
                }
              ]
            },
            {
              path: 'user',
              component: UserComponent,
            }
          ]
        },
        {
          path: '/user',
          outlet: 'modal',
          redirectTo: 'user',
          pathMatch: 'full'
        },
        {
          path: '/pets/:id',
          outlet: 'modal',
          redirectTo: (redirectData: any) => {
            return // construct redirect route with params.
          },
          pathMatch: 'full'
        },
      ]
    }

edited Mar 14 at 10:02

answered Mar 14 at 8:40

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michał B Mar 14 at 9:38

Thanks, your solution works. But what in case of accessing account/user or typing directly to browser? Redirecting?

Naren Murali Mar 14 at 9:39

@MichałB Yes, that is possible, but better to achieve using primary routes, it is more cleaner, just a suggestion.

Michał B Mar 14 at 9:52

Could you provide any simple example? I'm not so proficient at this yet.

Naren Murali Mar 14 at 10:02

@MichałB updated my answer with rough estimate of how the redirects will look like, please try configuring the redirect Fn for the parameterized route redirection.

Collectives™ on Stack Overflow

Cannot match children routes of blank path

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related