Angular2 auxiliary route not working
<p>I'm trying to use an <strong>auxiliary</strong> route in my angular 2 application but somehow the auxiliary route is not found.<br />
The <strong>home.page.component.ts</strong> is loaded within my primary outlet, which is working properly.<br /><br />
<em>I modified the code below to simplify it for readability</em><br /><br /></p>

<blockquote>
  <p><strong>home.page.component.ts</strong></p>
</blockquote>

<pre><code>&lt;ul class="nav nav-tabs"&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a [routerLink]="['/','childRouter:wepays']"&gt;WePays&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

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

<blockquote>
  <p><strong>routes.ts</strong></p>
</blockquote>

<pre><code>import { provideRouter, RouterConfig, RouterOutlet }  from '@angular/router';
import { LoginComponent } from '../components/login.component';
import { HomeComponent } from '../components/home.component';
import { WePaysComponent } from '../components/wepays.component';

const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/login',
        pathMatch: 'full',
    },
    {
        path: 'login',
        component: LoginComponent,
    },
    {
        path: 'home',
        component: HomeComponent,
    },
    {

        path: 'wepays',
        component: WePaysComponent,
        outlet: 'childRouter'   
    }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];
</code></pre>

<blockquote>
  <p><strong>When clicking on:</strong> [routerLink]="['/','childRouter:wepays']"</p>
</blockquote>

<pre><code>Error: Uncaught (in promise): Error: Cannot find the outlet childRouter to load 'WePaysComponent'
</code></pre>