How to use Angular router outlet inside a component which itself is served via primary router outlet?

Question

I am trying to make a router-outlet work inside DashboardComponent which itself is served via router-outler present in app.component.html.

The flow that I am trying to achieve goes like this:

• After user logins, user is redirected to /dashboard which will load DashboardComponent.

• DashboardComponent contains mat-sidenav-container with mat-sidenav links and a div container, inside which I have to serve different components - AComponent, BComponent, CComponent depending on the link clicked in mat-sidenav.

That is, path localhost:4200/dashboard/componentA should show AComponent in DashboardComponent 's div container and so on.

• path /dashboard should redirect to /dashboard/componentA

I am having hard time trying to figure out how to show the components inside DashboardComponent using router-outlet.

Is this possible? Is there any better way to do this?

Working code

**app.routing.ts**

    import { Routes, RouterModule } from '@angular/router';
    import { HomeComponent } from './home/home.component';
    import { DashboardComponent } from './dashboard/dashboard.component';
    
    import { AComponent } from './a/a.component';
    import { BComponent } from './b/b.component';
    import { CComponent } from './c/c.component';
    
    export const appRoutes: Routes = [
        { path: '', component: HomeComponent },
        { path: 'dashboard', component: DashboardComponent, outlet: 'dashboard',
        children: [
            { path: '', component:  AComponent },
            { path: 'componentA', component:  AComponent },
            { path: 'componentB', component: BComponent },
            { path: 'componentC', component: CComponent }
           
          ]},
    
        // otherwise redirect to home
       //  { path: '**', redirectTo: '' }
    ];

Answer 1

What you have works, with a few modifications.

Firstly, you don't need to assign a name to your router-outlet inside dashboard component. Named outlets have a different use case, you can read about them here:

Here are the modifications you need to make

1. Remove the outlet property from the dashboard route in app.routing.ts
2. Remove the name directive from the router-outlet in dashboard.component.html
3. Remove the 'dashboard/' from the [routerLink] in the a tags dashboard.component.html. Since these routes are children of the currently activated route, they their paths will automatically be appended after dashboard.

//dashboard.component.html
<mat-sidenav #sidenav align="start" position="start" mode="side"  opened="true" class="example-sidenav  side-nav-style">
  <ul>
    <li>
      <a [routerLink]="['componentA']">componentA</a>
    </li>
    <li>
      <a [routerLink]="['componentB']">componentB</a>
    </li>
    <li>
      <a [routerLink]="['componentC']">componentC</a>
    </li>
  </ul>
</mat-sidenav>
<div class="content">
  <p>dashboard works!</p>
  <router-outlet></router-outlet>          
</div>
         
//app.routing.ts
children: [
  // { path: '', component:  AComponent },
  { path: 'componentA', component:  AComponent },
  { path: 'componentB', component: BComponent },
  { path: 'componentC', component: CComponent },
  { path: '', redirectTo: 'componentA', pathMatch: 'full'}
]},

Additionally, notice I commented the first line in the children array and replaced it with a new one at the end. Using this approach, whenever the path is empty, it will automatically redirect to componentA and change the route as well, rather than just show componentA on an empty path.

Updated code

Answer 2

You basically have two routes pointing out to the same component.

{ path: '', component: DashboardComponent },
{ path: 'dashboard', component: DashboardComponent, }

You should use redirect to achieve your desired behavior. And in your dashboard.html - links to child components are absolute - it breaks the navigation anyway in your case - consider to use relative links. You don't need to specify a name of route outlet in this case as well - will work out of the box with proper routing setup. Once i fixed all of the above - navigation started to work.

See code samples below:

app.routing.ts

 export const appRoutes: Routes = [
{ path: '', pathMatch: "full", redirectTo: 'dashboard' },
{
   path: 'dashboard', 
    component: DashboardComponent ,
    children: [
    { path: 'componentA', component:  AComponent },
    { path: 'componentB', component: BComponent },
    { path: 'componentC', component: CComponent }

  ]},

];

dashboard.component.html

<mat-sidenav #sidenav align="start" position="start" mode="side"  opened="true" class="example-sidenav  side-nav-style">
  <ul>
    <li>
      <a [routerLink]="['./componentA']">componentA</a>
    </li>
     <li>
      <a [routerLink]="['./componentB']">componentB</a>
    </li>
     <li>
      <a [routerLink]="['./componentC']">componentC</a>
    </li>
  </ul>
</mat-sidenav>

Answer 3

I have made some modifications to your routing file and the dashboard component file.

First you don't need to use named routes. Secondly children routes take their parents initial path so no need to provide them again and you can directly specify the child route name in router link.

you can check the working code here

working code

hope this solves your issue.