Ionic-framework: DeepLinker doesn't reload defaultHistory on tab view when application is reloaded (F5 button)

[5im0n]

Ionic version:
[ ] 1.x
[X] 2.x

I'm submitting a
[X] bug report
[ ] feature request
[ ] support request

Current behavior:

This bug is only present on PWA application.
I use the startup Tabs template on which I've added two Pages: CustomerDetailPage and CustomerDetailDeepPage. My main page is the Tabs Page, with three tab (Home, About, Customers).

When I navigate deeper in the CustomerPage (CustomerPage --> CustomerDetailPage --> CustomerDetailDeepPage ) to reach the CustomerDetailDeepPage and I press F5 to reload the page, the history of the CustomerDetailDeepPage isn't created.
I don't have any back button in my header bar. Furthemore I see the Tabs even if I set the option tabsHideOnSubPages on the ion-tab.

Expected behavior:

When I'm on the CustomerDetailDeepPage, I expect to have the defaultHistory add to the navigation array as I mentionned it ot the DeepLinkConfig.
Furthemore I shouldn't see the Tabs due to the tabsHideOnSubPages option set in the ion-tab

Steps to reproduce:

As the problem is deeply link to the URL navigation it is irrelevant to use a Plunker to reproduce the issue.

Related code:

links: [
    { component: TabsPage, segment: 'tabs' },
    { component: HomePage, segment: 'home-page' },
    { component: AboutPage, segment: 'about-page' },
    { component: CustomerPage, segment: 'customer-page' },
    { component: CustomerDetailPage, segment: 'customer-detail', defaultHistory: [CustomerPage] },
    { component: CustomerDetailDeepPage, segment: 'customer-detail-deep', defaultHistory: [CustomerPage, CustomerDetailPage] }
]

<ion-tabs>
  <ion-tab [root]="homePage" tabUrlPath="home-tab"  tabTitle="Home" tabsHideOnSubPages="true" tabIcon="home"></ion-tab>
  <ion-tab [root]="aboutPage" tabUrlPath="about-tab"  tabTitle="About" tabsHideOnSubPages="true" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="customerPage" tabUrlPath="customer-tab"  tabTitle="Customers" tabsHideOnSubPages="true" tabIcon="contacts"></ion-tab>
</ion-tabs>

[jgw96]

Thanks for using Ionic, we will look into this.

[xinbenlv]

+1 same here

[danbucholtz]

This is fixed now.

Can you please verify and let me know if you have any issues?

npm install [email protected]

Thanks,
Dan

[5im0n]

@danbucholtz,

It does not seem to works with the new version.
If you want to test, clone the repo https://github.com/5im0n/ionic-tabs-test.

1. Go the page Contact -> Contact detail -> Contact detail deep
2. Press F5 to reload

[kensodemann]

@5im0n - your sample app seems to be using ionic-angular 3.7.1 and not 3.7.1-201710060319

Did you try it with 3.7.1-201710060319?

[5im0n]

@kensodemann Youpss, juste push my last commit

[kensodemann]

@5im0n - I made the following mods to your app and it worked fine:

contact.ts

@IonicPage({
  segment: 'contact-page'
})

without this, the URL for this page looks like #/home-tab/contact/contact which confuses the navigation. The last contact just needs to be something other than contact.

contact-detail.ts

@IonicPage({
  defaultHistory: ['ContactPage']
})

You didn't have anything, figured this made the most sense.

contact-deep-detail.ts

@IonicPage({
  defaultHistory: ['ContactDetailPage', 'ContactPage']
})

You had defaultHistory: ['/contact-detail'] but according to the ionicPage documentation the defaultHistory is an array of page names (OK, it doesn't say that so much as imply it, I'll fix that). You had a path segment.

I added the extra page in there as it seems the nav-stack ought to be three deep at this point: contact -> contact-detail -> contact-deep-detail.

Make those mods and everything works great (or at least it did for me). Give that a shot and see how it works for you.

[astec]

@kensodemann probably should be documented or even better if logs error/warning when activating tab/page.

[5im0n]

@kensodemann,

Just try your solution and it works great ✌️ ! Thank's

• About the confuse URL #/home-tab/contact/contact, another solution is to use the tabUrlPath attribute

<ion-tab [root]="tab3Root" tabUrlPath="contact-page" tabTitle="Contact" tabsHideOnSubPages="true"></ion-tab>

• About the defaultHistory, I'm agree with you, the documention isn't enough explicit.

• Do you know if it's possible to passe some params to a defaultHistory page ?

Thanks you for your time 😃

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