Ion-router-outlet not working on sub-pages

@bmsantos wrote:

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

Posts: 1

Participants: 1

Read full topic