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

1 Answer 1

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'
        },
      ]
    }