Confused about ion-router-outlet

Ionic Framework Ionic Angular
1

For a couple of years I am maintaining an Ionic/Angular app ‘Opwekkingsliederen’. This app is a digital textbook for populair christian songs in the Netherlands. It has various supporting features like chords, metronome, youtube player and links to spotify.

The app is now using Ionic 6 and Angular 13 with Cordova.

The app starts with a page showing the titles of all songs with a searchbar to search for specific songs. When tapping on a song the app navigates to the songpage.

Recently I add an ‘extended search’ page. Here users can search for songs based on theme, key or biblebook. This page can be accessed via the hamburger menu from both the start page as from the song page. This page also shows results from where tapping on a song brings you to the song page.

There my confusing began.
From 1st page to song page is done using navigateForward.
From songpage to extended search is also done with navigateForward
I tried using navigateforward also when tapping on a song from the extended searchpage.
So my viewstack would be:

  • Start page (list of songs)
  • Song page
  • Extended search page
  • Song page

While this worked ok on the browser, on Android (Samsung S20) the apps seemed to run out of memory. Pages became unresponsive and were only partly displayed. I believe this is caused because all the pages are kept in the DOM.

So I changed the transition from extended search page to song page to a NavigateBackwards. These solves the memory problem, but breaks navigation.

So I looked at a vanilla angular website I also developed (https://kijknaar.tv). This is also in Angular13. Looking at the router-outlet I noticed that there only one page is kept in de Dom, even with an active reuse policy.

So this confuses me. Is my Ionic app showing normal behaviour? Of should my app behave as the vanilla Angular website does? Keeping only one active page in the Dom?

Henk

2

Without seeing some code it will be hard to say what the issue is… What do the Routing Modules look like in your app?

Is the extended search page a sibling or child of the start page?

3

Already confused. What makes a page a child or a sibling page?

Here is a fragment from my routing table:

{ path: ‘’, redirectTo: ‘/search’, pathMatch: ‘full’ },
{ path: ‘search’, loadChildren: () => import(‘./pages/search/search.module’).then(m => m.SearchPageModule) },
{ path: ‘song/:book/:number/:playlistactive/:searchactive’, loadChildren: () => import(‘./pages/song/song.module’).then(m => m.SongPageModule) },
{ path: ‘extsearch’, loadChildren: () => import(‘./pages/extsearch/extsearch.module’).then(m => m.ExtsearchModule) },

I am not even sure there is an issue. Maybe it is how is supposed to be?

4

Ionic’s rooter does not work like Angular’s router. Angular keeps only the active component in the DOM. Ionic keeps all the history. Does your app moves forward endlessly? If that is the case, yes you can run out of memory.

To keep only one page in the DOM, you can use navigateRoot method of the NavController. But you should keep history of navigation yourself.

navigating forward:

this.navCtrl.navigateRoot('/search', { animated: true, animationDirection: 'forward' });

this.navCtrl.navigateRoot('/song', { animated: true, animationDirection: 'forward' });

this.navCtrl.navigateRoot('/extsearch', { animated: true, animationDirection: 'forward' });

navigating back:

this.navCtrl.navigateRoot('/song', { animated: true, animationDirection: 'back' });

this.navCtrl.navigateRoot('/search', { animated: true, animationDirection: 'back});
5

Thank you. From what you write I gather that what I am seeing is normal behaviour.

Using navigateRoot does technically works. But it is bad for user experience. Rebuilding pages on mobile devices takes too long for smooth page transitions. This is because the page has to be rebuild from an sqlite database.

I will have to work with the limititions :slight_smile: