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

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

• angular
• angular-routing
• angular-router

Share Improve this question Follow asked Mar 14 at 8:34 Michał BMichał B 51511 gold badge55 silver badges1616 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 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'
        },
      ]
    }