Router keeping multiple copies of page

Ionic Framework
1

We have a desktop app (Ionic 5/Angular) and some lazy loaded pages.
As user navigates around, it seems the ion-router-outlet accumulates multiple copies of the pages as children, with the inactive copies having the class “ion-page-hidden”;
These hidden pages have caused us some difficulties, e.g. Cypress finding the same target element across multiple of these pages. Is there a way to tell the router not to keep these hidden pages around?

FWIW the page’s Route definition looks like:

  {
    path: 'course/:id',
    component: CoursePage,
    canActivate: [ CheckLoggedInGuard ],
    loadChildren: './pages/course/course.module#CoursePageModule'
  },

Thanks!

1 Like