am trying to do the following
I successfully able to navigate to side nav bar using router-outlet and app.routing-module.ts. I tried auxiliary routing for the tabs inside the Nav4 component. But it got failed. Can anyone help me out on this?
app.routing-module.ts after importing the required components
const routes: Routes = [
{ path: '', component: Nav1Component},
{ path: 'nav2', component: Nav2Component},
{ path: 'nav3', component: Nav3Component},
{
path: 'nav4', component: Nav4Component, children: [
{ path: 'tab1', component: Tab1Component, outlet: 'configureoutlet'},
{ path: 'tab2', component: Tab2Component, outlet: 'configureoutlet'}
{ path: 'tab3', component: Tab3Component, outlet: 'configureoutlet'},
{ path: 'tab4', component: Tab4Component, outlet: 'configureoutlet'},
{ path: 'tab5', component: Tab5Component, outlet: 'configureoutlet'},
]
}
];
app.component.html
<router-outlet></router-outlet>
Nav4component.html
<h4>Nav 4 general content</h4>
<ul>
<li routerlink="['/nav4', { outlets: { configureoutlet: ['tab1'] }} ]" routerLinkActive='active'>Tab 1</li>
<li routerlink="['/nav4', { outlets: { configureoutlet: ['tab2'] }} ]" routerLinkActive='active'>Tab 2</li>
<li routerlink="['/nav4', { outlets: { configureoutlet: ['tab3'] }} ]" routerLinkActive='active'>Tab 3</li>
<li routerlink="['/nav4', { outlets: { configureoutlet: ['tab4'] }} ]" routerLinkActive='active'>Tab 4</li>
<li routerlink="['/nav4', { outlets: { configureoutlet: ['tab5'] }} ]" routerLinkActive='active'>Tab 5</li>
</ul>
<router-outlet name='configureoutlet'></router-outlet>
When I run the application am getting the following error:
Error: Cannot match any routes
You can specify relative path, something like this
<li routerlink="['tab1']" routerLinkActive='active'>Tab 1</li>
<li routerlink="['tab2']" routerLinkActive='active'>Tab 2</li>
<li routerlink="['tab3']" routerLinkActive='active'>Tab 3</li>
<li routerlink="['tab4']" routerLinkActive='active'>Tab 4</li>
<li routerlink="['tab5']" routerLinkActive='active'>Tab 5</li>
And router outlet will be simply,
<router-outlet></router-outlet>