PathMatch full always connecting to parameterized path even when the full path is not matching

Issue

I have routes like this

{
    path: ':fundHouseName',
    pathMatch: 'full',
    children: [{
        path: RoutePaths.funds,
        component: FundsComponent,
        canActivate: [AuthGuard]
    }]
},
{
    path: '',
    children: [{
        path: RoutePaths.funds,
        component: FundsComponent,
        canActivate: [AuthGuard]
    }]
},

What I want is that this route should match with the parameterized route (the first route)

https://localhost:4200/Kotak/funds

and this should match with the non parameterized one (the second route)

https://localhost:4200/funds

But both of the routes match with the parameter one while I have put pathMatch:'full' on the parameter route so what my understanding is that it should not match the parameter route until the route is full that is, the route should have :fundHouseName part and then funds part, so basically the path must be a full path like this

XYZ/funds

Is my understanding wrong about pathMatch?

How can I achieve that behavior?

Solution

[{
    path: '',
    children: [{
        path: RoutePaths.funds,
        component: FundsComponent,
        canActivate: [AuthGuard]
    }]
},
{
    path: ':fundHouseName',
    children: [{
        path: RoutePaths.funds,
        component: FundsComponent,
        canActivate: [AuthGuard]
    }]
},]

Just swap the order that will fix the issue.

Angular router will always match the first possible one, so you need to frame the list values so that the correct one is matched for all possible scenarios

https://localhost:4200/Kotak/funds -> will not match the first route since kotak is present so it will stepover to next route

https://localhost:4200/funds -> will match on the first route itself so no stepover to second route

NOTE: pathmatch full is also not necessary in this method so I removed it

Answered By - Naren Murali