Ionic-framework: Navigation: Tabs hidden on subpages are shown after reloading (v3.5.0)

[FdezRomero]

Ionic version: (check one with "x")
[ ] 1.x (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Our app is using v3.5.0, lazy loading and tab navigation for both mobile/PWA. When a subpage is reloaded, the back button is missing and the tabs are shown even though tabsHideOnSubPages was set to true. Check the steps for more info.

Expected behavior:
Tabs should be hidden and the back button present.

Steps to reproduce:
We have a TabsPage defined in the root nav, with tabs hidden on subpages in the template with [tabsHideOnSubPages]="hideOnSubPages". This property is set to true in the page constructor if the platform is core (desktop).

We navigate to a subpage from one of the tabs and it's pushed correctly: back button is present, tabs are hidden.

When the page is reloaded, the back button is missing and the tabs are shown. This page has a defaultHistory that goes back down to the tabs: defaultHistory: ['TabsPage', 'ListsPage'], as well as its parent.

Related code:
N/A

Other information:
N/A

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.9
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.10.3
    OS         : macOS Sierra
    Xcode      : Xcode 8.3.3 Build version 8E3004b
    ios-deploy : 1.9.1
    ios-sim    : 6.0.0
    npm        : 5.0.4

[iget-master]

Could someone explain why there is a nav/n4 and a lot of prefixes on the navigator url? Is this even documented?

[FdezRomero]

Yes, it's documented in the changelog notes for v3.5.0 😊

[iget-master]

Really @FdezRomero? We should be reading different things. It only says:

As a result, if you're using deep linking, the urls of the application will be different.

Allright, different how? Why nav piece? Why n4 piece?
Sorry about using your issue to ask this, but it makes no sense to me.

[davec21]

@iget-master He should have linked you to here: #12178

[FdezRomero]

No problem. It's due to the huge refactor that has been done in the navigation to better support nested navigation and tabs. It also says that URLs will be improved in the next round.

My understanding is that they are starting with a full, robust deeplink URL that works in all use cases (nav/n4 and tabs/t0 are internal ids) and will start cleaning from there. But yeah, I totally get this is not ideal but keep in mind that is an ongoing effort.

I'm sure @danbucholtz can give a better explanation 😅

[jgw96]

Hello, all! Thanks for using Ionic. So first on the longer URL's. Because of how flexible our nav system is, especially the ability to have multiple navs, there is a lot of tracking of state in the URL's that has to happen for things to work correctly. This is what your seeing when you see n4 etc. These are not the final URL's by any means and in fact locally on @danbucholtz 's machine, we already have nicer url's. Our end goal is to have much shorter/cleaner url's and that is a focus for the upcoming ionci releases, especially as we start to double down on PWA's. Second, @FdezRomero , dan is aware of this tabs issue and it is something that we are looking to fix in upcoming releases. Thanks for opening an issue with us!

[FdezRomero]

Adding that I was able to reproduce the issue in the simple-tabs test from the Ionic repo, running gulp e2e.watch --folder nav/simple-tabs and adding tabsHideOnSubPages="true" to the first tab. If you go to "Page Two" tabs are hidden. Reload and tabs are shown again.

Opening a separate issue for the back button disappearing (#12212), since it's happening independently.

[judsonmusic]

While I appreciate the new URL nav support it just killed my SEO big time. I use prerender.io to crawl and cache my sites. I will look VERY forward to having the option to enable sorter urls with a config possibly?ie. {shortUrls: true} //note: enabling this may reduce or ......

For now you can rollback:
npm install [email protected] --save --save-exact
then make sure to rollback angular to 4.0.0 and rxjs to 5.1.1

{
  "name": "judsondesigns2017",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/compiler-cli": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "cordova-browser": "^4.1.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.0.1",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.1.1",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "1.3.12",
    "@ionic/cli-plugin-cordova": "1.4.0",
    "@ionic/cli-plugin-ionic-angular": "1.3.1",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

[dahuahe]

Excuse me, has this problem been solved yet?

[FdezRomero]

@dahuahe No, it hasn't been fixed yet (even using defaultHistory).

[joao-gsneto]

The same for me.
Develop ionic software with tabs i have the same issue, after reloading the page only show the tab page, without the tabs navigation. I need to change the URL again to back.

Is any way to solve this problem, even if temporarily for development environment?

[rishabh58]

Hii @FdezRomero and Everyone ,

I have got same problem today. I am new to ionic but i guess I am on right path. Looks like problem from Ionic platform itself.

Any fix for this problem available now?

Please help

thanks.

[FdezRomero]

Hi @rishabh58,

I got around the issue by changing how the navigation works in the PWA, so I can't really say if the problem has been fixed or not. My suggestion is to check if you're using the latest version (3.9.2) or get around this bug in a way that works for you.

Maybe somebody else can confirm if this is still an issue.

[rishabh58]

Great Suggestion @FdezRomero .

I have upgraded to 3.9.2 and guess what problem is gone now. 👍

Here is how you can upgrade to latest ionic angular version.

npm install [email protected] --save

Thanks.

[FdezRomero]

Please confirm if it's working on 3.9.2 so I can close this issue. Thanks!

[rishabh58]

Yes it worked for me.

But after updating one more thing that I have added in my app.module.ts

swipeBackEnabled: 'true'

So I cant say its only upgrade that has resolved the issue.

Here is my final code:
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
tabsPlacement: 'top',
platforms: {
ios: {
tabsHideOnSubPages: 'true',
swipeBackEnabled: 'true'
},
android: {
tabsHideOnSubPages: 'true',
swipeBackEnabled: 'true'
}
}
})
]

[FdezRomero]

Closing this issue then. If any participant is still having problems on 3.9.2 please open a new issue referencing this one (#12197). Thanks!

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