Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Ionic v4-beta.3] Bug navigation between tab page & no page tab - back button redirects to wrong tab #15216

Closed
Anthony2539 opened this issue Aug 17, 2018 · 58 comments

Comments

@Anthony2539
Copy link

commented Aug 17, 2018

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.0-rc.3
   @angular-devkit/schematics : 0.7.0-rc.3
   @angular/cli               : 6.0.8
   @ionic/ng-toolkit          : 1.0.0
   @ionic/schematics-angular  : 1.0.1

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.2, (and 4 other plugins)

System:

   ios-deploy : 1.9.2
   ios-sim    : 6.1.1
   NodeJS     : v10.6.0 (/usr/local/bin/node)
   npm        : 6.4.0
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

Describe the Bug
I have an application with a tabs ( 5 pages home, search, map , info and tarif).
From the search page i can go on a non-tab page like this this.router.navigate(['station'], { queryParams: station});
On the station page i have a back button to return to the search page <ion-back-button text=""></ion-back-button>
The back button disappear at the second time.
Here are some additional informations:

tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'search',
        outlet: 'search',
        component: SearchPage
      },
      {
        path: 'map',
        outlet: 'map',
        component: MapPage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'tarif',
        outlet: 'tarif',
        component: TarifPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

app-routing.module.ts

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'map', loadChildren: './map/map.module#MapPageModule' },
  { path: 'search', loadChildren: './search/search.module#SearchPageModule' },
  { path: 'station', loadChildren: './station/station.module#StationPageModule' },
  { path: 'info', loadChildren: './info/info.module#InfoPageModule' },
  { path: 'tarif', loadChildren: './tarif/tarif.module#TarifPageModule' }
];

i don't know if it's my bad or a bug ?

Steps to Reproduce
Steps to reproduce the behavior:

  1. Click on tab menu to go to search page
  2. From search page go to station page ( a non-tab page)
  3. Go back to search page with back button
  4. Click on the same station to go on station page
  5. The back button disappear, i can't go back on search page

Expected Behavior
Fix nav when i from a non-tab page

Additional Context
I have a log when i go to the station page at the second time
ion-router-outlet.js:32 router-outlet destroyed

And i have an another issue, how i can conserve the tab menu on my station page ?

@ionitron-bot ionitron-bot bot added the triage label Aug 17, 2018

@Anthony2539 Anthony2539 changed the title Bug navigation between tab page & no page tab [Ionic v4-beta.3] Bug navigation between tab page & no page tab Aug 17, 2018

@kensodemann

This comment has been minimized.

Copy link
Contributor

commented Aug 17, 2018

Note that this sample app: https://github.com/kensodemann/test-prolea which I created to demo a different but related issue (#14861) also shows this behavior if the person picking this up needs a sample app to reproduce this.

@wesleyxiao

This comment has been minimized.

Copy link

commented Aug 23, 2018

same issue here: router-outlet destroyed

@magicfa

This comment has been minimized.

Copy link

commented Sep 10, 2018

any news on that?
I took a look at the ionic-conference app because it's working there.
Interesting implementation..

@patrickhofer

This comment has been minimized.

Copy link

commented Sep 12, 2018

Same issue here. Navigating from a subpage backwards lands on the first tab instead the last selected.

More: https://stackoverflow.com/questions/52268092/navigate-back-to-tab-index-with-ionic-4/52268576#52268576

@Chethannp

This comment has been minimized.

Copy link

commented Sep 18, 2018

Any update on this ?

@kkagill

This comment has been minimized.

Copy link

commented Oct 1, 2018

I'm still having the same issue.

@osman144

This comment has been minimized.

Copy link

commented Oct 2, 2018

It seems this issue is still unresolved

@contactjavas

This comment has been minimized.

Copy link

commented Oct 5, 2018

Same here, the router-outlet destroyed issue makes the page transition becomes rude, without animation (at least in ios).

Simple reproduce:

  • Create page with tabs
  • In first tab (say, home tab), create list of items.
  • Set the item's href to item detail page.
  • Click it, and you'll be redirected to the detail page.
  • Now refresh browser, you will stay in detail page.
  • Press ion-back-button (with defaultHref). You'll be moved to home tab.
  • Now from home tab, click on that item again, and the issue will occur.

Update:
For my case, this issue is solved by setting routerDirection="forward" to my items in home tab.

@shuki770

This comment has been minimized.

Copy link

commented Oct 22, 2018

I solved the problem by navigate with ionic NavController instead of angular router
I changed the following line:

this.router.navigateByUrl(url)

to

this.navController.navigateForward(url)

@danielehrhardt

This comment has been minimized.

Copy link

commented Nov 27, 2018

I solved the problem by navigate with ionic NavController instead of angular router
I changed the following line:

this.router.navigateByUrl(url)

to

this.navController.navigateForward(url)

Does not work for me

@jsalasdev

This comment has been minimized.

Copy link

commented Nov 27, 2018

I'm still having the same issue.

@bredexporno69

This comment has been minimized.

Copy link

commented Dec 5, 2018

removing routerDirection fixed the issue for me. No more router-outlet destroyed. Dobby is a free elf

@lampi87

This comment has been minimized.

Copy link

commented Dec 6, 2018

Same for me.
Neither navCtrl.navigateForward, nor router.navigateByUrl works for me

@anshnagrath

This comment has been minimized.

Copy link

commented Dec 8, 2018

this.navCtrl.goBack();
worked for me;
it is like subsitute to this.navCtrl.pop();
in ionic 4

@urbanjoe

This comment has been minimized.

Copy link

commented Dec 10, 2018

The "router-outlet destroyed" issue is a pain and we mixed it up with a tab problem on our side. The "router-outlet destroyed" appears, navigation between child pages:

https://forum.ionicframework.com/t/ionic-4-navigate-between-child-routes-router-outlet-destroyed/149902
!

@paulstelzer

This comment has been minimized.

Copy link
Collaborator

commented Dec 13, 2018

We've released beta.18 now with another refactor of tabs. Could you check if the issue is fixed? Please keep in mind the breaking changes: https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md#400-beta18-2018-12-13

@lampi87

This comment has been minimized.

Copy link

commented Dec 13, 2018

Unfortunately issue is still reproducible for me.
Page structure:
Page 'test' defined in app-routing.module.ts
Tab 1 (no childs)
Tab 2 (no childs)
Tab 3, one child
If I change to Tab 3 -> Tab 3 child and click on ion-button to open page, e.g /test1, via routerLink. On click on the page /tabs/tab1 is opened
Same issue if tab 3 has no childs and page /test is opened. On clicking back button, tab1 is opened

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Dec 13, 2018

@paulstelzer

This comment has been minimized.

Copy link
Collaborator

commented Dec 13, 2018

Then please create a repo so we can take a look at it

@bossjon

This comment has been minimized.

Copy link

commented Feb 22, 2019

@paul-landaeta-tierconnect-com, The user can open the page from any tab or any other page, and how will you define the back url?
ion-back-button is created for this.

@kensodemann kensodemann added this to Backlog 🤖 in Ionic Core via automation Feb 27, 2019

@TioChachi29

This comment has been minimized.

Copy link

commented Feb 28, 2019

In tabs.router.module.ts change this:

const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ ... { path: '', redirectTo: '/tabs/tab1', pathMatch: 'full' }

for this (remove /tab1):

{ path: '', redirectTo: '/tabs', pathMatch: 'full' }

This solves the back button of the topbar as the physical of android. It works well for me.

@servrox

This comment has been minimized.

Copy link

commented Mar 2, 2019

Live Demo

@bossjon I have created a second demo project covering the case with global pages.

@paul-landaeta-tierconnect-com When you navigating back like this, you will lose the state inside your tabs. This is because internally it navigates back to /tabs and then to the route specified in your back() function. See my solutions to navigate back without losing tab-states.

Direct link to my advanced ion-back-button component.

@webmozart

This comment has been minimized.

Copy link

commented Mar 2, 2019

I can confirm the issue described in the gif by @paulstelzer in Ionic 4.0.2.

@bossjon

This comment has been minimized.

Copy link

commented Mar 4, 2019

@servrox, Thanks for the answer. Your option works, but when you navigate back (swipe) on iOS, then the ion-router-outlet.ts#L197 or stack-controller.ts#L78 function runs. Because of this, your solution does not work, I think the (ionic) developers will notice your decision and fix the navigation. @paulstelzer

Ps: I also thought for a long time how to add a custom version of the navigation to the application, but I could not find a way.

@servrox

This comment has been minimized.

Copy link

commented Mar 5, 2019

@bossjon uh ur right 👍🏻 completely forgot about navigation back via swipe gesture..
I added this case to my demo.

ion-back-button-tabs fully support swipe gestures now!
For the workaround it seemed easiest to disable the gesture for the particular page.

@bossjon

This comment has been minimized.

Copy link

commented Mar 5, 2019

@servrox I think this issue is not in the priority of the ionic team, but this issue makes the tabs unnecessary. I also tried a lot of ways like you, but I don’t want to write another component for this and maintain it.
Thanks again for the proposed solution to this issue.

@dafi

This comment has been minimized.

Copy link

commented Mar 14, 2019

The problem is present in Ionic 4.1.1 but @TioChachi29 workaround works for me, it sounds simple and I don't need to change html or ts files, so I can rearrange code (this already happened) without problems.
Honestly I don't understand if this can create some side effect

@TioChachi29

This comment has been minimized.

Copy link

commented Mar 14, 2019

@dafi yes, if it has a side effect, when ionic serve is executed on some occasions the content of the tabs is not displayed, but when executing it in Android or in iOS this does not happen. I do not know if there is another problem.

@dafi

This comment has been minimized.

Copy link

commented Mar 14, 2019

@TioChachi29 if the problem occurs only with ionic serve I can tolerate it, thanks for the hint

@nicsaravanan

This comment has been minimized.

Copy link

commented Mar 20, 2019

In tabs.router.module.ts change this:

const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ ... { path: '', redirectTo: '/tabs/tab1', pathMatch: 'full' }

for this (remove /tab1):

{ path: '', redirectTo: '/tabs', pathMatch: 'full' }

This solves the back button of the topbar as the physical of android. It works well for me.

Its solved the issue, Thanks

@epetre

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2019

In tabs.router.module.ts change this:

const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ ... { path: '', redirectTo: '/tabs/tab1', pathMatch: 'full' }

for this (remove /tab1):

{ path: '', redirectTo: '/tabs', pathMatch: 'full' }

This solves the back button of the topbar as the physical of android. It works well for me.

It solves the issue, but the url is the wrong one at the top, it's the root tab url (/tabs in my case). Also if you tap the current tab, it tries to load the root tab url.

@carlesferreiro

This comment has been minimized.

Copy link

commented Mar 25, 2019

In tabs.router.module.ts change this:

const routes: Routes = [ { path: 'tabs', component: TabsPage, children: [ ... { path: '', redirectTo: '/tabs/tab1', pathMatch: 'full' }

for this (remove /tab1):

{ path: '', redirectTo: '/tabs', pathMatch: 'full' }

This solves the back button of the topbar as the physical of android. It works well for me.

Thanks!
It solves the issue but if you navigate forward to /tabs it will not select the default tab. So, you'll have always to specify the full url of the default tab (/tabs/tab1 or whatever).

@liamdebeasi liamdebeasi self-assigned this Apr 2, 2019

@liamdebeasi liamdebeasi moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Apr 2, 2019

@liamdebeasi liamdebeasi moved this from On deck ⚾️ to In progress 🤺 in Ionic Core Apr 2, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 9, 2019

Hi everyone,

I have opened a PR that should resolve this issue: #18005

One of my colleagues will be reviewing it soon, but in the meantime if anyone would like to take a look and provide feedback, that would be great!

We appreciate your patience as we work to resolve this issue 🙂

@liamdebeasi liamdebeasi moved this from In progress 🤺 to Needs review 🤔 in Ionic Core Apr 9, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 Apr 10, 2019

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 10, 2019

Hi there,

This issue has been resolved, and I have published a nightly build of Ionic with the fix. You can install it with npm i @ionic/angular@dev.

Please let me know if you are still running into any issues with this.

Thanks!

@evgeniyefimov

This comment has been minimized.

Copy link

commented Apr 19, 2019

@liamdebeasi hi!

Thank you for the fix. What about navigation back (pop) programmatically? When I call navCtrl.pop from a nested outlet which is not in a tab, it redirects back to the right tab which has some nav stack, but then navCtrl.pop doesn't work. With ion-back-button it works fine after fix.

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Apr 19, 2019

Hi there,

Please open a new Bug Report for this issue.

Thanks!

@ionitron-bot

This comment has been minimized.

Copy link

commented May 19, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators May 19, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.