Component was not loaded due to order of path in routing or Why component was not loaded but another component is loaded with : id in routes? angular advance level question

Photo by Ian Stauffer on Unsplash

here is routing

 Routes = [{
  path: 'owner',
  component: OwnersLeadComponent,
  children:[
    {
      path: '',
      component: OwnerStartComponent
    },
    {
      path: ':id',
      component: OwnerDetailsComponent
    },
    {
      path: 'new',
      component: OwnerUpdateComponent
    },
   
    {
      path: ':id/new',
      component: OwnerUpdateComponent
    },

  ]
}];

in address bar

…appUrl/owner/new

but order detail component loaded.

So …solution is order of path so correct is….

Routes = [{
  path: 'owner',
  component: OwnersLeadComponent,
  children:[
    {
      path: '',
      component: OwnerStartComponent
    },
    {
      path: 'new',
      component: OwnerUpdateComponent
    },
    {
      path: ':id',
      component: OwnerDetailsComponent
    },
    
    {
      path: ':id/new',
      component: OwnerUpdateComponent
    },

  ]
}];