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.
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.