Angular 16 Navigate to sibling route

We have updated our app from Angular 12 to Angular 16 and there is an issue with angular routing.

Below is the routing of one of our module :

export const routes: Route[] = [
{
path: '',
component: MainLayoutComponent,
children: [
{
path: '',
component: GeneralComponent,
data: {
minimalHedaer: true
},
children: [
{
path: '',
redirectTo: 'user-detail',
pathMatch: 'full'
},
{
path: 'user-detail',
component: UserDetailComponent,
data: {
minimalHedaer: true
},
children: [
{
path: '',
component: UsersComponent,
data: {
minimalHedaer: true,
sessionTimeoutConfig: { sessionTimeout: true }
}
},
{
path: 'success',
component: SuccessComponent,
canActivate: [UsersGuard],
data: {
minimalHedaer: true,
sessionTimeoutConfig: { sessionTimeout: true }
}
},
{
path: 'fail',
component: FailComponent,
canActivate: [UsersGuard],
data: {
minimalHedaer: true,
sessionTimeoutConfig: { sessionTimeout: true }
}
},
]
},
]
}
]
}
]
}
];

@NgModule({
imports: [RouterModule.forChild(routes), MainLayoutModule],
exports: [RouterModule]
})
export class UserDetailsRoutingModule {}


The first page the user lands to is 'user-details' and component is UsersComponent.

In UsersComponent we navigate to the page 'success' after a clicking event.

We use this.router.navigate(['../success'], { relativeTo: this.route }) and it works with angular 12 but after the update to angular 16, this line leads to Not Found. It supposed to work because the 'success' page is a sibling of the UsersComponent route path

I didn't find any posts related that can help with our issue

Continue reading...