title: Same path and same number of parameters but different components for routing in Angular 5 application
body: <p><strong>app.routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
      { path: '', component: AComponent },
      ...
      { path: 'homes/:id/:rate/:item', component: HomesComponent},
      { path: 'details/:id/:name/:product', component: DetailComponent},
      ...
  ]
  </code></pre>
  
  <p>As per client's requirement, we need to change the path to homes for both components. So we've updated the app.routing.module.ts.</p>
  
  <p><strong>Updated app.routing.module.ts</strong></p>
  
  <pre><code>const routes: Routes = [
      { path: '', component: AComponent },
      ...
      { path: 'homes/:id/:rate/:item', component: HomesComponent},
      { path: 'homes/:id/:name/:product', component: DetailComponent},
      ...
  ]
  </code></pre>
  
  <p>but, due to the <strong>same number of parameters that we're using in each component</strong> we are getting conflict and it's not rendering properly, for all condition it is routing to HomesComponent that we've given first in the Routes list. </p>
  
  <p>Do you guys have any suggestions to resolve this issue, without compromising the path and number of parameters?                     </p>