Angular2 navigate from a component to a sibling component without tearing down the first
<p>I've just started learning Angular2 and I want to build a very common "list-detail" style page similar to this: <a href="http://xgrommx.github.io/rx-book/index.html" rel="nofollow noreferrer">http://xgrommx.github.io/rx-book/index.html</a> . When you click an item in left-bar it initiates a navigation to the center detail view without tearing down the left-bar. What's the best way to achieve this effect?</p>

<p>My current design is like the following:
<a href="https://i.stack.imgur.com/DWp66.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DWp66.png" alt="enter image description here"></a></p>

<p>When I start the home component, the list component(child1) will load immediately and it will call an external API to fetch the names (only names) of a list of items. When clicking a item name on the left, it will create a new Detail-component. The detail component fetch item detail in its ngOnInit method. I've tried using auxiliary routes to nest the two child components on the same page but it does not seem to work. My home routes look like this:</p>

<pre><code>export const HomeRoutes: RouterConfig = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: ListComponent
      },
      {
        path: ':item',
        component: DetailComponent
        outlet: 'detail'
      }
    ]
  }
];
</code></pre>

<p>And in my <code>home.component.ts</code> I simply have this:</p>

<pre><code>  &lt;h2&gt;Home&lt;/h2&gt;

  &lt;router-outlet&gt;&lt;/router-outlet&gt;

  &lt;router-outlet name="detail"&gt;&lt;/router-outlet&gt;
</code></pre>

<p>And the way I navigate to the detail view is calling navigate() in the list-component like this:</p>

<pre><code>onSelect(item : string) {
    this.router.navigate(['/detail', item]);
  }
</code></pre>

<p>But everytime I click the any of the items the detail view does not show up and it shows error like this:</p>

<pre><code>Error: Uncaught (in promise): Error: Cannot match any routes: 'home/item'
.
</code></pre>

<p>Am I on the right track of using Auxiliary route and is there any better way to achieve this feature?</p>