Wrong Redirect Angular Router (to localhost)

This is the example url :

localhost:4202/pages/users/STSP0001PNIENOUIJX/dashboards/level/0


app-routing.module.ts

const routes: Routes = [
{
path: 'pages/users',
loadChildren: () => import('./@modules/users-dashboard/users-dashboard.module').then(mod => mod.UsersDashboardModule),
},
...
]


UsersDashboardRoutingModule

const routes: Routes = [
{
path: ':userId/dashboards',
loadChildren: () => import('../monitoring-levels/monitoring-levels.module').then( (module) => module.MonitoringLevelsModule)
},
{ path: '', component: PageNotFoundComponent },
{ path: '**', component: PageNotFoundComponent }
];


MonitoringLevelsRoutingModule

const routes: Routes = [
{ path: 'level/:levelId', component: MonitoringDashboardComponent },
{ path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`},
{ path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];


MonitoringDashboardComponent

<ng-container [ngSwitch]="monitoringLevelID">
<level0-monitoring-dashboard *ngSwitchDefault></level0-monitoring-dashboard>
<level1-monitoring-dashboard *ngSwitchCase="1"></level1-monitoring-dashboard>
<level2-monitoring-dashboard *ngSwitchCase="2"></level2-monitoring-dashboard>
</ng-container>


With the example url, I get a redirect to localhost:4202

This works only with this modified :

• remove path: "" of MonitoringLevelsRoutingModule
• add pathMatch: 'full' to MonitoringLevelsRoutingModule

MonitoringLevelsRoutingModule

const routes: Routes = [
{ path: 'level/:levelId', component: MonitoringDashboardComponent },

{ path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];


or

const routes: Routes = [
{ path: 'level/:levelId', component: MonitoringDashboardComponent },
{ path: '', redirectTo: `level/${DEFAULT_LEVEL_ID}`, pathMatch: 'full'}
{ path: '**', redirectTo: `level/${DEFAULT_LEVEL_ID}`}
];

Continue reading...