Niccolò Boddi
Niccolò Boddi

Reputation: 33

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(or with other example), I get a redirect to localhost:4202.

Other example :

This works only with this modified :

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}`}
];

Upvotes: 2

Views: 54

Answers (0)

Related Questions