Ionic-framework: 【ionic 4】ionic back button issue

[wesleyxiao]

i create a tabs
which include three pages

tabs
----home
----menu
----contact

in home page i add a detail page

when click button on home page, can be push to detail page

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  constructor(private router: Router) { 

  }
  pushTo(id){
    this.router.navigate(['/detail/'+id]);
  }
}

so when i click button on home page, it will go detail page, and then i click back button it go back to home page, everything looking good.

problem is if i click button again, detail page button is missing and have no page transition

on console there show "router-outlet destroyed"

here is my routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'detail/:id', loadChildren: './detail/detail.module#DetailPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

here is my tabs routing module

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

here is detail.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>详情</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
{{post_data}}
</ion-content>

[Anthony2539]

15216 same issue

[HarshSdrc]

Did any one tried to use hardware back button in android...In my case its not working at all

[gartner90]

Me too, any solution, 👍?

[HarshSdrc]

Using nav control ....For mobile we need nav control

[Chethannp]

Any update ??

[AnemosGroup]

Try with this:

• Don't touch paths in main routing module.

• In tabs routing module:

....
import {ChildrenPage} from '../children/children.page';
...
const routes: Routes = [
    {
path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: '',
                redirectTo: '/tabs/(home:home)',
                pathMatch: 'full',
            },
            {
                path: 'home',
                outlet: 'home',
                component: HomePage
            },
            {
                path: 'children',
                outlet: 'home',
                component: ChildrenPage
            },
            {
                path: 'scan',
                outlet: 'scan',
                component: ScanPage
            },
            {
                path: 'educational',
                outlet: 'educational',
                component: EducationalPage
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/(home:home)',
        pathMatch: 'full'
    }
];

• In home.page.html (e.g. link on a button or on a item)
  <ion-button href="/tabs/(home:children)"></ion-button>

• In children.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Children Page Title</ion-title>
  </ion-toolbar>
</ion-header>

It works on iOS, not yet tested on Android.
It keeps tabs visible with nested navigation.
What is missing is the swipe-left to go back to home, as it happens when you use ion-nav component.
Let me know if it works on Android.

[simion]

@LucaTerzaghi i nagivate to a simple page (over tabs), with the new angular router, and the back buttons works, but swipe back does not :(

[gartner90]

The issue was fixed in last ionic 4 version 😄

[simion]

@gartner90 even the swipe back issue? :D

[gartner90]

What about use this.location.back(); into a gesture event?

[gulullu]

The issue was fixed in last ionic 4 version 😄

'router-outlet destroyed' issue still existing on '4.0.0-beta.16'.

[olivermuc]

There is still a back button issue when navigating outside tab context and back!

Here is my current workaround, rerouting if needed:

this._router.events.pipe(
  filter(event => event instanceof NavigationStart)
).subscribe((route: NavigationStart) => {
  // 
  // If route destination is "broken/incomplete", use last known open tab
  if (route.url === '/app/tabs' && this.lastOpenTab) {
    this._router.navigateByUrl(this.lastOpenTab);
  } else {
    // 
    // Fix part 2, keep track of last open tab
    if (route.url.match('/app/tabs')) {
      this.lastOpenTab = route.url;
    }
  }
});

[danielehrhardt]

I also have this issue with the Ionic Starter Template.

[arihantdaga]

In my case i cant even see the back button if not adding this class - class="show-back-button" :O and clicking on button doesnt do anything..
This is my code in detail page-

<ion-header>
  <ion-toolbar>
      <ion-buttons slot="start" >
          <ion-back-button class="show-back-button"></ion-back-button>
      </ion-buttons>
      <ion-title>{{title}}</ion-title>
  </ion-toolbar>
</ion-header>

and from home page i am sending to this page like this -

 openCategory(cat){
    this.router.navigate(['/products'], {queryParams : {title: cat.name, cat: cat._id}})
  }

[arihantdaga]

It wasn't working in beta 16. Its working fine in beta 17.

[paulstelzer]

Thanks for the issue! As @arihantdaga mentioned this should work in beta.17, so I close this here. If the issue occurs again, please open a new issue and describe what's not working correct

UPDATE: The main issue was because of tabs. It's correct that tabs are not working correctly with the back button, but with the next betas, we will have a refactor of the tabs (see #16619). So i close this here and please follow that issue

[giovannipds]

I may be getting something wrong. This code doesn't should to be showing <ion-back-button> when there's history?

<ion-header no-border translucent>
  <ion-toolbar color="white">

    <!-- toggle -->
    <ion-buttons slot="start">
      <ion-back-button color="primary"></ion-back-button> <!--======== THIS... -->
      <ion-menu-button color="primary"></ion-menu-button>
    </ion-buttons>

    <!-- logo -->
    <ion-title text-center>
      <a routerLink="/home">
        <img alt="My App" height="16" src="./assets/img/logo.svg" width="127">
      </a>
    </ion-title>

    <!-- just for fixing ion-title centralization temporarily -->
    <ion-buttons class="hidden" slot="end">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

  </ion-toolbar>
</ion-header>

It never shows. Should it be showing when I go from home to DetailPage, right? My routes:

const routes: Routes = [
  { path: 'pedido/:tracking_code', loadChildren: './detail/detail.module#DetailPageModule' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: '**', loadChildren: './not-found/not-found.module#NotFoundPageModule' },
];

My package.json:

{
  "name": "myapp",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "build:prod": "ionic build --prod --service-worker -- --base-href /app/ && cp src/.htaccess www/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^7.1.4",
    "@angular/core": "^7.1.4",
    "@angular/forms": "^7.1.4",
    "@angular/http": "^7.1.4",
    "@angular/platform-browser": "^7.1.4",
    "@angular/platform-browser-dynamic": "^7.1.4",
    "@angular/pwa": "^0.10.7",
    "@angular/router": "^7.1.4",
    "@ionic-native/core": "5.0.0-beta.21",
    "@ionic-native/splash-screen": "5.0.0-beta.21",
    "@ionic-native/status-bar": "5.0.0-beta.21",
    "@ionic/angular": "^4.0.0-rc.0",
    "@ngtools/webpack": "^7.1.4",
    "cordova-browser": "5.0.4",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^2.3.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "core-js": "^2.6.1",
    "rxjs": "6.2.2",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.8.8",
    "@angular-devkit/build-angular": "^0.11.4",
    "@angular-devkit/core": "^7.1.4",
    "@angular-devkit/schematics": "^7.1.4",
    "@angular/cli": "^6.2.8",
    "@angular/compiler": "^7.1.4",
    "@angular/compiler-cli": "^7.1.4",
    "@angular/language-service": "~6.1.1",
    "@ionic/angular-toolkit": "^1.2.1",
    "@types/jasmine": "^2.8.14",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^10.12.18",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^3.1.1"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

node -v v8.12.0, npm -v 6.4.1.

It only shows when I insert defaultHref (but it shows always then, I expect the behavior of just showing when needed).

[paulstelzer]

Ion back button only shows if there is something in stack (you have to navigate forward)

[giovannipds]

Yep, that's what I'm expecting...

[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.