title: How to properly setup nested routing in angular
body: <p>I'm trying to setup angular route with nested path.
  parent page is <code>/list</code> child page is <code>/list/:id</code></p>
  <p>for some reason, the following route doesnt work. if I navigate to <code>/list/:id</code>, the route is found, but it loads <code>ListComponent</code> instead of <code>ViewComponent</code></p>
  <pre class="lang-js prettyprint-override"><code>{
    path: 'list',
    component: ListComponent,
    children: [
      {
        path: ':id',
        component: ViewComponent
      }
    ]
  }
  </code></pre>
  <p>I'm pretty sure this is the same setup as the example in <a href="https://angular.io/guide/router#nesting-routes" rel="nofollow noreferrer">angular doc</a>. am I missing something?</p>
  <p>the following works, but it has the wrong hierarchy, <code>/list</code> is siblings to <code>/list/:id</code></p>
  <pre class="lang-js prettyprint-override"><code>{
    path: 'list',
    children: [
      {
        path: '',
        component: ListComponent
      },
      {
        path: ':id',
        component: ViewComponent
      }
    ]
  }
  </code></pre>
  <p>see <a href="https://stackblitz.com/edit/angular-qqwp4a?file=src/app/app.routing.ts" rel="nofollow noreferrer">stackblitz example</a></p>