Ion-router-outlet not working on sub-pages

I’ve been trying to display the contents of a page on a sub ion-router-outlet but so far to no avail.

Sample project:
https://github.com/bmsantos/router-outlet-issue

The primary router-outlet is usually found in app.component.html and used to load the initial router contents:

<ion-app>
    <ion-router-outlet name="primary"></ion-router-outlet>
</ion-app>

In the sample app, you will find that the app.routing.module.ts will drive the app to a simulated login page. Once the user logs in, the app will route to members -> dashboard and place the new page in the primary router-outlet. The dashboard routing is defined in members-routing.module.ts.

app.routing.module.ts:

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
  },
  {
    path: 'login',
    loadChildren: () => import('./pages/public/auth/login/login.module').then(m => m.LoginPageModule),
  },
  {
    path: 'members',
    canActivate: [AuthGuard],
    loadChildren: './members/member-routing/member-routing.module#MemberRoutingModule',
  }
];

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

members-routing.module.ts:

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('../../pages/dashboard/dashboard.module').then( m => m.DashboardPageModule),
  },
];

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

The dashboard page is just a ion-slipt-pane with a left menu and a secondary ion-router-outlet. The goal is to display the pages or components routed from the menu on the left into the secondary router-outlet.

<ion-content>
  <ion-split-pane contentId="pages-content">
    <ion-menu contentId="pages-content" type="overlay">
      <ion-content>
...
      </ion-content>
    </ion-menu>

    <ion-router-outlet id="pages-content" name="secondary"></ion-router-outlet>

  </ion-split-pane>
</ion-content>

The dashboard-routing.module.ts routes the requested page to be displayed in the secondary router-outlet and the page for folder/Add option is supposed to be rendered in the secondary outlet.

dashboard-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: DashboardPage
  },
  {
    path: 'folder/Add',
    loadChildren: () => import('../../pages/add-event/add-event.module').then(m => m.AddEventPagePageModule),
    outlet: 'secondary'
  },
];

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

When the app is executed you can either trigger this option by clicking Trigger Link button or + Add option from the menu.

            <ion-button *ngIf="isFirst" expand="block"
                        [routerLink]="[{ outlets: { secondary: ['folder', 'Add']} }]"
                        routerDirection="forward"
            >Test Link</ion-button>

The resulting app link is properly generated and no error appear in the console:

http://localhost:8100/#/members/dashboard/(secondary:folder/Add)

The page is not loaded though and I’m not sure what I’m doing wrong or if this is a legit issue in Ionic 6.

Any idea, thanks

As a side note, in pure Angular router-outlet work just fine as sub router-outlets:

After some more investigation, the issue seems to point to Angular itself. There’s an issue with Angular router-outlets when used with lazy-loading. I’ve been able to add a working lazy-loading example that shows the workaround in the above github repository.

Check lazy-loading branch

Did not confirm if the same solution will solve the issue on Ionic yet.

Issue is now fixed on sample code.
The problem is with Angular and not with Ionic.

You’re not using ion-router-outlet but router-outlet. The problem is with ion-router-outlet nested within ion-router-outlet