Ionic-framework: [v4-beta.15] New ion-tabs doesn't work with router-outlet

[hebra]

Bug Report

Ionic Info

ionic info
✔ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)             : 4.3.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.15-0
   @angular-devkit/build-angular : 0.9.0-beta.3
   @angular-devkit/schematics    : 0.9.0-beta.3
   @angular/cli                  : 6.2.6
   @ionic/angular-toolkit        : 1.1.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.1, browser 5.0.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.0.3, (and 18 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/heb/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v11.0.0 (/usr/local/Cellar/node/11.0.0/bin/node)
   npm               : 6.4.1
   OS                : macOS
   Xcode             : Xcode 10.1 Build version 10B61

Describe the Bug
New ion tabs/tabbar doesn't trigger ion-router-outlet when tab is clicked.

Steps to Reproduce
Steps to reproduce the behavior:

1. Create a new Ionic tab demo via ionic start myApp tabs --type=angular
2. change into myApp and update the used @ionic/angular version via npm i @ionic/[email protected]
3. afterwards start the app via ionic serve, after a few seconds the homepage will open in your browser with no tabbar visible. This is due to the fact that the generated demo is not updated to the latest changes yet.
4. Next, open the file tabs.page.html, and replace the content with

<ion-tabs>
  <ion-tab-bar color="dark">
    <ion-tab-button tab=”home”>
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
    <ion-tab-button tab=”about”>
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
    <ion-tab-button tab=”contact”>
      <ion-icon name="contact"></ion-icon>
      <ion-label>Contact</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

  <ion-tab tab="home">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab tab="about">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab tab="contact">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

1. Reload the app in the browser
2. The tabbar is now visible and Home is selected, though clicking on About or Contact doesn't have any effect
3. In my main app (where I found this issue) the tab is triggered but still router-outlet is not loaded. But If I replace the ion-router-outlet with e.g. ion-content that content is proper loaded and displayed when the tab is clicked.

Expected Behavior
It looks like the migration steps mentioned in the beta.15 release notes are incomplete or not accurate enough. E.g. the old code has a href element for each tab (in addition to the router-outlet) but the release note don't really explain what happened to that href as it is gone in the new approach.

[sbannigan]

Wondering about this as well. Having persistent nav stacks when switching between tabs is one of the most important features of Ionic IMO. Understandably v4 is still in beta, but aside from this tab refactor, I haven't seen much mention of that missing functionality. At least with the tab refactor it fixes whatever bug was causing the app to lag when switching back to a tab that had a stack, but it still requires an href on the button, which pops back to the root page.

[RZR666]

same issue here.

First tab is the only one that works.

[RZR666]

https://github.com/ionic-team/starters/pull/526/files

working using that example.

[MrSparklle]

Thats the right way to implement tab bar in new beta 15:

<ion-tabs>

  <ion-tab tab="home">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab tab="about">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab tab="contact">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>

  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="home" href="/tabs/(home:home)">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="about" href="/tabs/(about:about)">
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="contact" href="/tabs/(contact:contact)">
      <ion-icon name="contacts"></ion-icon>
      <ion-label>Contact</ion-label>
    </ion-tab-button>

  </ion-tab-bar>

</ion-tabs>

[hebra]

@MrSparklle solution is indeed working. The missing part was the href on the button, which isn't mentioned in the migration release notes.
This issue can be closed.

[MrSparklle]

@hebra just you that open the issue can close it.

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