angulartypescriptangular2-routingangular17

Angular 17 - Auxiliary route


I am trying to configure the auxiliary route in Angular 17 but have some issues most likely due to the change to standalone components. Here is my configuration:

export const FEATURE_ROUTES: Routes = [
  {
    path: '',
    component: ContactComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'contact',
      },
      {
        path: 'education',
        component: EducationComponent,
        // loadComponent: () =>
        //   import('./modules/education/education.component').then(
        //     (c) => c.EducationComponent
        //   ),
        outlet: 'modal',
      },
    ],
  },
];
export const routes: Routes = [
  { 
    path: 'contact', 
    loadChildren: () => import('./feature.routes')
      .then((r) => r.FEATURE_ROUTES), 
  },
  { 
    path: 'skills', 
    outlet: 'modal', 
    loadComponent: () => import('./modules/skills/skills.component')
      .then((s) => s.SkillsComponent),
  },
];

The routes' config is imported in the main.ts according to the new Angular approach.

app.component.html

<button (click)="navigateToContact()">Open contact</button>
<router-outlet></router-outlet>
<div class="modal-outlet">
  <router-outlet name="modal"></router-outlet>

Navigate to the contact page works fine.

public navigateToContact(): void {
  this.router.navigate(['contact']);
}

contact.component.html

<button (click)="loadEducation()">Load educations</button>

<router-outlet></router-outlet>
<router-outlet name="test"></router-outlet>

And the loadEducation method:

public loadEducation(): void {
  this.router.navigate([
    '/',
    { outlets: { modal: ['contact', 'education'] } },
  ]);
  // this.router.navigate(['contact/education']);
}

What I would like to achieve is a working URL:

http://localhost:4200/contact(modal:education)

I am getting the following error:

Error: NG04002: Cannot match any routes. URL Segment: 'contact/education'


Solution

  • The way to navigate to auxiliary route for EducationComponent should be:

    public loadEducation(): void {
      this.router.navigate(['contact', { outlets: { modal: ['education'] } }]);
    }
    

    Hence, the URL will be:

    /contact(modal:education)
    

    Demo @ StackBlitz