Angular 2 router paths

Question

i have 2 questions regarding Angular 2 router paths, i've spent some time googling about it, but with no luck, anyways i have following routes setup:

{ path: 'contract', component: ContractInsertUpdateComponent, children: [
         { path: '' },
         { path: ':id', component: ContractInsertUpdateComponent, children:[
                  { path: 'buyers', component : ContractTabBuyerComponent },
                  { path: 'seller', component : ContractTabSellerComponent }
        ]}                
]}

First of all, let me explain what i'm trying to achieve here, i want to use same component for both insert/update of contract. I also have more children routes and complete url should look something like

localhost:4200/contract/2/buyers

1. First thing i'm curious of is default route of contract

   { path: '' }

If i understand it right if route is something like

localhost:4200/contract

it should load ContractInsertUpdateComponent, which it does atm, my question is: Is this the right way to do it? Also I would like to avoid usage of empty component as default route if possible.

2. Rest of this route setup doesn't currently work, for example if i type something like

localhost:4200/contract/2

im getting Error: Cannot match any routes. URL Segment: 'contract/2'

In my understanding it should load ContractInsertUpdateComonent am i wrong?

I don't know where else to look for help, and I need some one to point me to the right direction...Thanks for help in advance!

Answer 1

`/contract/2 matches this route

{ path: '' },

because /contract/2 starts with '' (actually every route does) and then searches for child routes of this route but fails because there are none.

{ path: '', pathMatch: 'full' },

should fix it, because then the router doesn't search for routes that start with '' but only for routes that are ''

update

{ path: 'contract', component: ContractInsertUpdateComponent, children: [ 
    { path: '', pathMatch:'full', /* I guess you want some `component: ...` or `redirectTo: ...` here }, 
    { path: ':id', children:[ 
        { path: '', pathMatch:'full' }, 
        { path: 'seller', component : ContractTabSellerComponent } 
    ]} 
 ]}