title: Angular 6 nested children routing not rendering view
body: <p>I am stuck in a place where the navigation works, but view is not working basically one component is mapped to two different routes:</p>
  
  <p><strong>Component</strong> is <em>example.component.ts</em></p>
  
  <p><strong>Routes</strong> are</p>
  
  <p><a href="http://localhost:4200/manager/nav/example" rel="nofollow noreferrer">http://localhost:4200/manager/nav/example</a></p>
  
  <p><a href="http://localhost:4200/nav/valuation" rel="nofollow noreferrer">http://localhost:4200/nav/valuation</a></p>
  
  <p>Have two different modules and have there own routes defined</p>
  
  <p>Navigation mecahnism: when user hits <strong>manager</strong> it loads its own component and then user can navigate to <strong>manager>nav</strong> and from nav user can naviagte to manager>nav>example</p>
  
  <p><strong>manager.routing.ts</strong></p>
  
  <pre><code>{ path: 'manager', component: ManagerComponent , children:[
   { path: '', component: PortfolioManagerComponent },
   { path: 'nav', component: NavComponent},children: [
    { path: 'example', component: component:ExampleComponent}
  
  ] }
  </code></pre>
  
  <p>]
    }</p>
  
  <p><strong><a href="http://localhost:4200/manager/nav" rel="nofollow noreferrer">http://localhost:4200/manager/nav</a></strong>
  <a href="https://i.stack.imgur.com/F3ei2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F3ei2.png" alt="enter image description here"></a></p>
  
  <p><strong><a href="http://localhost:4200/manager/nav/example" rel="nofollow noreferrer">http://localhost:4200/manager/nav/example</a></strong>
  <a href="https://i.stack.imgur.com/8WM7q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8WM7q.png" alt="Issue view not change"></a></p>
  
  <p>Route changed but view not render bascially its on manager view not on example view</p>
  
  <p>But when i use the route nav and than hit example it loads the original page and nav has its own module and routing </p>
  
  <p><strong>nav.routing.ts</strong></p>
  
  <pre><code>  { path: 'nav', component: NavComponent, children: [
    { path: '', component: PropertyComponent},
    { path: 'example, ', component:ExampleComponent}
   ]
  </code></pre>
  
  <p><strong>Showing right views</strong></p>
  
  <p><a href="https://i.stack.imgur.com/rwiOm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rwiOm.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/T5pC5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T5pC5.png" alt="enter image description here"></a></p>
  
  <p>When i use the route <strong><a href="http://localhost:4200/manager/nav/example" rel="nofollow noreferrer">http://localhost:4200/manager/nav/example</a></strong> till <a href="http://localhost:4200/manager/nav" rel="nofollow noreferrer">http://localhost:4200/manager/nav</a> the view changes and when I naviagte to  <strong><a href="http://localhost:4200/manager/nav/example" rel="nofollow noreferrer">http://localhost:4200/manager/nav/example</a></strong> the same view remains its is not loading the view but route changes</p>
  
  <p>You can see first two Images to view the routing  and last two images the right view </p>