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'
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)