Ion-router-outlet not working on sub-pages

Ionic Framework Ionic Angular
1

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

2

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

3

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.

4

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

5

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

2 Likes
6

This works for me, I use a nested router outlet,

using <router-outlet> just reduce the screen to a 30% of the resolution aligned verticaly in the center.
change it to <ion-router-outlet> solve the problem.

app.component > ion-router-outlet > home > ion-router-outlet

7

i have the same problem. I started a new ionic app with angular and i set one router-outlet instead of ion-router-outlet. All worked fine but when i tried to use router.navigate, only url has changed, the page was not reloaded.

I change all router-outlet by ion-router-outlet and the css is all broken… and with router-outlet all is working fine but the height is reducing to 30%… why??