How does angular deal with two similar routes that have different parameters?

Question

How does angular deal with two similar routes that have different parameters?

For example:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: ':username',
    component: UserComponent
  },
  {
    path: ':username2',
    component: HomeComponent2
  }
];

How does angular know or how do you tell angular which parameter is username and which parameter is username2?

Answer 1

It cannot, it will always go to UserComponent, as that's the first match it will find. They should always have a identifiable path part:

{
  path: 'user/:username',
  component: UserComponent
},
{
  path: 'home/:username2',
  component: HomeComponent2
}