Router outlet inside router outlet is not working

Question

this is my main routing configuration

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

const routes: Routes = [{ path: 'child-a', loadChildren: () => import('./child-a/child-a.module').then(m => m.ChildAModule) }, { path: 'child-b', loadChildren: () => import('./child-b/child-b.module').then(m => m.ChildBModule) }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

Next I have child

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

import {ChildAComponent} from './child-a.component';

const routes: Routes = [
  {path: '', component: ChildAComponent},
  {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module)},
  {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module)},
  {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module)}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ChildARoutingModule {
}

and of course htmls: app.component.html:

<h2>App works</h2>
<div class="nav-menu">
  <a routerLink="child-a" [routerLinkActive]="['active-link']" class="link">child a</a>
  <a routerLink="child-b" [routerLinkActive]="['active-link']" class="link">child b</a>
</div>
<router-outlet></router-outlet>

and app child a:

<h3>Child A</h3>
<div class="nav-menu">
  <a routerLink="child-a1" [routerLinkActive]="['active-link']" class="link">child a1</a>
  <a routerLink="child-a2" [routerLinkActive]="['active-link']" class="link">child a2</a>
</div>
<router-outlet></router-outlet>

Using this configuration when getting either child-a1 and child-a2, the sub child component replaces child component in main router-outlet.

Trying to use name of router-outlet is not working I have tried to do this like this:

<router-outlet name=aux></router-outlet>
or
<router-outlet name='aux'></router-outlet>

and route

const routes: Routes = [
  {path: '', component: ChildAComponent},
  {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module), outlet:'aux'},
  {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module), outlet:'aux'},
  {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module), outlet:'aux'}
];

you probably won't need a named router unless you have 2 router outlets at the same level — CruelEngine
stackblitz.com/edit/angular-ivy-17ypzp?file=src/app/child-a/… . Please refer the stackblitz and modify it according to your requirement . — CruelEngine
This solution is not working. When clicking child a, child a shows up with header and link to a1. When a1 is clicked a disappears and child a1 is displayed — piokub

piokub piokub · Accepted Answer · 2020-12-01T14:44:14

I have found a mistake: In child route configuration instead of

const routes: Routes = [
  {path: '', component: ChildAComponent},
  {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module)},
  {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module)},
  {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module)}
];

it should be:

const routes: Routes = [
  {path: '', component: ChildAComponent, children:[
    {path: 'child-a1', loadChildren: () => import('./child-a1/child-a1.module').then(m => m.ChildA1Module)},
    {path: 'child-a2', loadChildren: () => import('./child-a2/child-a2.module').then(m => m.ChildA2Module)},
    {path: 'child-a3', loadChildren: () => import('./child-a3/child-a3.module').then(m => m.ChildA3Module)}
]}
];

Router outlet inside router outlet is not working

1 Answers