Routing in angular - Does the order of paths matter?

Issue

Does the order of the paths listed in app.module.ts file matters? For example...

   RouterModule.forRoot([
      {path:'',component:HomeComponent},
      {path:'followers',component:GithubFollowersComponent},
      {path:'followers/:username/:userid',component:GithubProfileComponent},
      {path:'posts',component:PostsComponent},
      {path:'**',component:NotFoundComponent}
    ])

vs..

  RouterModule.forRoot([
      {path:'',component:HomeComponent},
      {path:'followers/:username/:userid',component:GithubProfileComponent},
      {path:'followers',component:GithubFollowersComponent},
      {path:'posts',component:PostsComponent},
      {path:'**',component:NotFoundComponent}
    ])

I was watching a tutorial and it said that the order does matter.. but I tried it both ways and they both seem to work as expected...

If I move the wild card path( ** ) to the top then yes I do notice the difference. But for others does the order don't matter at all? Or am I missing something here?....

Solution

The other paths are completely different, so no, order does not matter for these. The routing engine won't confuse followers and followers/:username/:userid - as the Angular guide points out, :username and :userid are required parameters, so need to be present, as in followers/testuser/10.

It does matter when two routes conflict though, as in posts and **. The path /posts will be matched by both routes, and first one wins.

This is why the wildcard is at the end. As a basic rule, always try to order by most specific to least specific.

Answered By - Rhumborl