Angular2: Multiple router-outlet in Child Componet

Question

I am creating ng2 version of scotch.io 's angular-ui-router tutorial. I am able to achieve the basic navigation for home and about page. In home I am able to create navigation for children i.e. list and paragraph. I am stuck with about page. I am able to navigate to about page but I am not able to render the child component of about in their corresponding outlets. This is what I am doing:

about.component.html

<div class="jumbotron text-center">
    <h1>The About Page</h1>
    <p>This page demonstrates <span class="text-danger">multiple</span> and <span class="text-danger">named</span> views.</p>
</div>
<div class="row">
    <div class="col-sm-6">
        <router-outlet name="aboutOne"></router-outlet>
        <router-outlet name="aboutTwo"></router-outlet>
    </div>
</div>

about.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: 'about',
                outlet: 'aboutOne',
                component: AboutOneComponent
            },
            {
                path: 'about',
                outlet: 'aboutTwo',
                component: AboutTwoComponent
            }
        ]
    }
];

about-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { aboutRoutes } from './about.routes';
@NgModule({
    imports: [RouterModule.forChild(aboutRoutes)],
    exports: [RouterModule]
})
export class AboutRoutingModule {

}

I don't know what I am missing. The about page is being rendered but it's not rendering it's child component also there's no error in the console. Here's the complete github repo.

Answer 1

After playing with named <router-outlet>, I figured out that. I was not giving the proper paths. Since both of my component should be rendered in their corresponding outlets when user lands into the about page. There's not relative url/path for both. They are default children of about. So I updated my path:'about' to path:''. And it started working. Hope this will be helpful to someone.

about.routes.ts

export const aboutRoutes: Routes = [
    {
        path: 'about',
        component: AboutComponent,
        children: [
            {
                path: '',
                outlet: 'aboutOne',
                component: AboutOneComponent,
                pathMatch: 'full'
            },
            {
                path: '',
                outlet: 'aboutTwo',
                component: AboutTwoComponent,
                pathMatch: 'full'
            }
        ]
    }
];

@Pradeep Thanks for highlighting the path issue.