Lazy Loading component inside named router outlet, children in primary

Question

I have a component called clientComponent. Inside the component I have named routerLink, let's call it clientView. This routerLink is inside the primary router link. The clientView should show only direct children of the route. So in other words, ...clients/family should be show inside clientView, but subsequent children, ...clients/family/add should be inside the primary routerLink.

Here is my client module routes:

const clientRoutes: Route[] = [
  {
    path: '',
    component: clientComponent,
  },
  {
    path: 'family',
    outlet: 'clientView',
    loadChildren: () => 
      import('../family/family.module').then(m => m.FamilyModule)
  }
];

Here is my family module routes:

const familyMemberManagementRoutes: Route[] = [
  {
    path: '',
    component: FamilyComponent,
    outlet: 'clientView'
  },

  {
    path: 'add',
    loadChildren: () => 
      import('../family/family-editors.module').then(m => m.FamilyEditorsModule),
    outlet: 'primary'
  }, 

  {
    path: 'edit/:id',
    loadChildren: () => 
      import('../family/family-editors.module').then(m => m.FamilyEditorsModule),
    outlet: 'primary'
  },
];

Now I am trying to view these routes inside the component:

<a mat-button [routerLink]="[{outlets: { 'clientView': ['family']}}]">Family members</a>

<div class="w-100">
  <router-outlet name="clientView"></router-outlet>
</div>

All this does is change the route to client/(clientView:family), but it does not actually show anything inside of the router Link. It's blank.

when adding the primary outlet to the router link: [routerLink]="[{outlets: { 'primary': ['family'], 'clientView': ['family']}}]", I get an error saying 'cannot match any routes: ".../client"'. So it does not event add 'family' to the url.

This is where I am stuck. I've tried a lot of things, none of which seem to work. Can anyone please point me in the right direction? Because I am still struggling with the basic aux route.

Basically, a non router version what I am trying to achieve, looks like this. Which I am now seriously contemplating:

<a (click)="selectedRoute('family')>View family>

<ng-container *ngIf="selectedRoute === 'family'">
    <family-component></family-component>
</ng-container>

Answer 1

Remove the reference to clientView inside familyMemberManagementRoutes.

{
  path: '',
  component: FamilyComponent
},

clientRoute is already assigning the child router-outlet to clientView, so you shouldn't need to declare it again in the child.

However, there is a larger concern about trying to render the other child routes to the primary router-outlet. I'm not sure if that works because Angular's router-outlets have a heirarchy, and trying to have a lazy-loaded child route leap-frog a render to the primary route breaks that heirarchy.

The main purpose of having named outlets is to allow you to target multiple router outlets with a single RouterLink directive. You may want to try setup a named router-outlet that's a sibling to clientView for your add and edit:id routes.

Or, you can try to find a way to arrange your components/modules so they are aligned with the app's link hierarchy.