how to Load named router outlet in angular

Below is my setup.

app.component.html

<p>App Component works!</p>
<router-outlet></router-outlet>

activity.component.html

<p>Activity Component Works!!<p>
<div> There are some other header controls present here, this HTML should render by default</div>
<router-outlet name="activity_router_outlet"></router-outlet>

childa.component.html

<p>ChildA Component Works!!<p>

childb.component.html

<p>ChildB Component Works!!<p>

app-routing.module.ts

{ 
    path: 'activity', 
    component: ActivityComponent,
    canActivate: [AuthenticateGuard],
    loadChildren: () => import('./activity/activity.module').then(m => m.ActivityModule) 
}

activity-routing.module.ts

{
    path: 'activity/childa',
    component: ChildAComponent,
    outlet: 'activity_router_outlet'
},
{
    path: 'activity/childb',
    component: ChildBComponent,
    outlet: 'activity_router_outlet'
}

when I to access below route ChildA.
http://localhost:4200/activity/childa
below is what i am expecting as output

App Component works! 
Activity Component Works!! 
There are some other header controls present here, this HTML should render by default
**ChildA** Component Works!!

when I to access below route ChildB.
http://localhost:4200/activity/childb
below is what i am expecting as output

App Component works! 
Activity Component Works!! 
There are some other header controls present here, this HTML should render by default
**ChildB** Component Works!!

I get below error. What am I not doing write. Please help

Cannot match any routes. URL Segment: 'activity/childa'

1 answer

  • answered 2021-05-14 21:15 Owen Kelvin

    You will need to check on your routing. Below steps will solve your problem

    Change your routes config to

         {
            path: 'childa',
            component: ChildaComponent,
            outlet: 'activity_router_outlet'
          },
          {
            path: 'childb',
            component: ChildbComponent,
            outlet: 'activity_router_outlet'
          }
    

    I have simply removed the 'activity' prefix

    Now in your links we can define them with

    <a [routerLink]="['/activity',{ outlets: {primary: null, activity_router_outlet: 'childa'}}]">/activity/childA</a> <br />
    <a [routerLink]="['/activity',{ outlets: {primary: null, activity_router_outlet: 'childb'}}]">/activity/childB</a>
    

    Demo Here