Ionic 5 : How to navigate to the child and to the sub-child

Question

I try to migrate my app written with ionic 3 to ionic 5. This is a nightmare ! In my app, I have the following case:

The 2 arrows show when I touch the top right button this is excecute router.navigate() the Page1 appear with his back-button. But when I touch the top right button of Page1, the router.navigate() is executed from Page1, the Page2 appear without back-button. In Page1 and Page2 I use <ion-back-button></ion-back-button> I don't know how to reveal the back-button on the Page2. I think there is a problem with Routes configurations, but I don't know to solve it... I created a new app from scratch with ionic CLI :

> ionic start tabs myApp

And I added the 2 pages with :

> ionic generate page Page1

And same for the Page2.

app-routing.module.ts :

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then( m => m.Page1PageModule)
  },

  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
  }
];

page1-routing.module.ts :

const routes: Routes = [
  {
    path: '',
    component: Page1
  }
];

Thanks.

Answer 1

I solved my problem :

I moved Page2 route from app-routing.module.ts to page1-routing.module.ts In the page1.page.ts I call Page2 from Page1 :

this.router.navigate(['Page1', 'Page2']

app-routing.module.ts :

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then( m => m.Page1PageModule)
  }
];

page1-routing.module.ts :

const routes: Routes = [
  {
    path: '',
    component: Page1
  },
  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
  }
];

The back button appear and work fine.