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.

Answer 2

Hey @hitesh most probably the error is in routing of about component, you have used same name of path in for both components as well as parent one please change this and try it like this

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

Might be the case angular will try to load component on the basis of URL whihc is found about in every case so child component may not render in this case.