title: Angular2 routing, parent child -- route component vs view component
body: <p>I'm working on an <strong>Angular2</strong> application, currently we're on beta-17 since the release candidate no longer supported bundling and broke everything (that's another story).</p>
  
  <p>I understand that the relationship between parent and child routes are expected to be that the child must be a "routing component" if it wants to have routes. That makes sense, right -- but what if I want to have a parent "routing component", that has a child "view component" which acts as a parent to a child "routing component"?</p>
  
  <pre><code>.
  ├── app.component // Has two child routes, both are "view components"
       ├── plan.component
       └── design.component // View component, route "/design/:id/..."
           ├── header.component
           ├── nav-and-body.component // Routing component
           └── footer.component
  </code></pre>
  
  <p>I have a top-level app that has two routes, the <code>/plan/:id/...</code> and <code>/design/:id/...</code> routes. As you can see I have a desire that these will serve as parents to other "routing components". Imagine we're in the "design" route, and we attempt to navigate to a child route defined in the <code>NavAndBodyComponent</code> it doesn't work, nor does it throw an error.</p>
  
  <p>I believe this is due to the fact that I have a parent "routing component", that has a child "view component", which has a nested "routing component" - how can I fix this without changing this hierarchy?</p>
  
  <p>The view components load as expected:</p>
  
  <p>URL: <code>localhost:5000/design/10</code> </p>
  
  <p>But when I attempt navigation to the nested child route the URL changes to</p>
  
  <p>URL: <code>localhost:5000/model</code></p>
  
  <p>I want (and expected):</p>
  
  <p>URL: <code>localhost:5000/design/10/model</code></p>
  
  <p><strong>Update</strong></p>
  
  <p>Here is a very detailed <kbd><a href="https://plnkr.co/edit/wyMnt4?p=preview" rel="nofollow"><code>Plunker</code></a></kbd>!</p>