bug (Angular) : default ion-back-button is not working

[indraraj26]

Bug Report

Ionic version:

[ ] 4.x [x] 5.x

Current behavior:

I followed the docs and pick the first option default back button, I added in children page and back button is showing properly but when i click on it nothing happens

Expected behavior:

When i click on back button it should take me to previous route/component

Steps to reproduce:

Related code:

home.ts to navigate

    onChildrenHandler(i) {
        this._router.navigate([i], { relativeTo: this._route })
    }

on children.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>children</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>

</ion-content>
<ion-footer>

</ion-footer>

Other information:

Ionic info:

ionic info

Ionic:

   Ionic CLI                     : 6.11.0 (C:\Users\indra26\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.3.1
   @angular-devkit/build-angular : 0.1000.7
   @angular-devkit/schematics    : 10.0.7
   @angular/cli                  : 10.0.7
   @ionic/angular-toolkit        : 2.3.2

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.9.0
   OS     : Windows 10

[ionitron-bot[bot]]

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

For a guide on how to create a good reproduction, see our Contributing Guide.

[indraraj26]

Hi Liam,

I forget to put link. here you go : https://github.com/indraraj26/ionic5-starter-tabs-sidemenu/tree/ion-back-button-click branch: ion-back-button-click

@liamdebeasi any update on this ?

Thank you

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. Your routing setup is incorrect. You should be managing pages from the "main" routing modules. Take a look at our conference app setup for examples:

1. Base pages: https://github.com/ionic-team/ionic-conference-app/blob/024450f4a820576c5366d90956551372fd891d36/src/app/app-routing.module.ts
2. Nested with tabs: https://github.com/ionic-team/ionic-conference-app/blob/024450f4a820576c5366d90956551372fd891d36/src/app/pages/tabs-page/tabs-page-routing.module.ts

For top level routes, the conference app manages them in app-routing.module.ts. For routes nested inside of tabs, the conference app manages them in tabs-page-routing.module.ts. Notice that it does not manage child routes inside of the routing module for each page.

It looks like you want to have a child page inside of the home page. While we do not recommend this as it can lead to a confusing user experience with nested navigation, you can achieve this by adding an additional ion-router-outlet inside of the home page. From there, you could manage the child routes in home-routing.module.ts like how the conference app manages child pages of tabs in tabs-page-routing.module.ts.

[indraraj26]

Hi,

If the routing setup is incorrect how it is working in plain angular project? This is really sad i have been using same routing in all angular project.

As per comment, it look like it is limitation of ion-router-outlet.

I am using router-less component routing I think what it is called without parent if you use children route without parent component, component then it should render on uplevel of router-outlet. This is what angular does behind the scene.

edit 1: All the childrens will render in router-outlet of uplevel consider for now app.component.html Basic flow:

path: ''
children [
{
path:''
component: xyz
},
{
path: ':id',
component: editxyz
}
]

[liamdebeasi]

The routing configuration is incorrect in that it does not really make sense to translate that to a mobile application. It may have worked in a regular Angular application because navigation in a browser is linear. Ionic Framework uses stack-based navigation which is closer to how mobile applications behave. This issue could very well be a limitation of ion-router-outlet, but this is also not something we are likely to support as it goes against how stack-based navigation is supposed to behave.

[indraraj26]

Hi Liam,

I just did as you said but that will render children component inside home component as it has ion-router-outlet, is there any other way around to make it work with navigation.

if i don't add ion-router-outlet in home component then children component is not rendering.

Ohh my bad its working actually i forget to declare children component in declaration array of home.module.ts, Yes component less routing is well supported by ion-router-outlet.

Now everything is working, I also demonstrate the component routing with placing blank component that will hold ion-router-outlet and rest will be same.

Thank you @liamdebeasi

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.