Angular Router Ordering?

0
votes

Please to explain what the difference between 2 code snippet below:

  1. const routes: Routes = [ { path: '', canActivate: [AuthGuard], component: MainComponent, children: [ { path: '', component: DashboardComponent }, { path: 'items/add', component: AddItemComponent }, { path: 'items/:type/sandbox', component: SandboxComponent }, { path: 'items/:id', component: EditWrapperComponent }, { path: 'items/:account/:id', component: EditWrapperComponent } ] } ];

  2. const routes: Routes = [ { path: '', canActivate: [AuthGuard], component: MainComponent, children: [ { path: '', component: DashboardComponent }, { path: 'items/add', component: AddItemComponent }, { path: 'items/:id', component: EditWrapperComponent }, { path: 'items/:account/:id', component: EditWrapperComponent }, { path: 'items/:type/sandbox', component: SandboxComponent } ] } ];

The code snippet 1 works as well when I call localhost:4200/items/app/sandbox (app is type) but code snippet 2 doesn't work.

I don't know why so please help explain :)

1
angularrouter

1 Answers

1
votes

In code snippet 2, /items/app/sandbox is routed to 'items/:account/:id because of ordering.