Ion-tabs not switching tabs

I’ve this on every one of my pages. The navbar is displaying, but the buttons aren’t switching to other tabs.

This is one of the pages (every one is the same, just with a different ion-title):

<ion-header>
  <ion-toolbar>
    <ion-title>Saved</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="saved">
            <ion-icon name="heart"></ion-icon>
            <ion-label>Saved</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="search">
            <ion-icon name="search"></ion-icon>
            <ion-label>Search</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="playlists">
            <ion-icon name="list"></ion-icon>
            <ion-label>Playlists</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

And this is my app-routing.modules.ts file:

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

const routes: Routes = [
  { path: '', redirectTo: 'saved', pathMatch: 'full' },
  { path: 'saved', loadChildren: './pages/saved/saved.module#SavedPageModule' },
  { path: 'search', loadChildren: './pages/search/search.module#SearchPageModule' },
  { path: 'playlists', loadChildren: './pages/playlists/playlists.module#PlaylistsPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

If anyone knows a solution… I’d love to know!! I’ve absolutely no idea why this doesn’t work, this is mostly straight from the docs.

Try adding the href attribute to the ion-tab-button. Your tab buttons are connected to the tabs via the tab attribute, but require an href to actually change the view

Tried both these, none worked. The second one is how it’s used on the docs, but the docs also say that href isn’t needed for Angular, which is what I’m using (afaik).

Edit: tried this one without /'s too.

<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="saved" href="/">
            <ion-icon name="heart"></ion-icon>
            <ion-label>Saved</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="search" href="/search">
            <ion-icon name="search"></ion-icon>
            <ion-label>Search</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="playlists" href="/playlists">
            <ion-icon name="list"></ion-icon>
            <ion-label>Playlists</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>
<ion-tabs>
    <ion-tab-bar slot="bottom">
        <ion-tab-button tab="saved" href=/app/pages/(saved:saved)">
            <ion-icon name="heart"></ion-icon>
            <ion-label>Saved</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="search" href="/app/pages/(search:search)">
            <ion-icon name="search"></ion-icon>
            <ion-label>Search</ion-label>
        </ion-tab-button>
        <ion-tab-button tab="playlists" href="/app/pages/(playlists:playlists)">
            <ion-icon name="list"></ion-icon>
            <ion-label>Playlists</ion-label>
        </ion-tab-button>
    </ion-tab-bar>
</ion-tabs>

The second way is pre version 4.0.0-beta15
Ionic 4 no longer requires the named outlets

Did you generate this tabbed app using the ionic CLI? It creates a tab page nested in the the root app page that then points to the 3 tab pages

app
    |_tabs
        |_tab1
        |_tab2
        |_tab3

And the app-routing should only point to the tabs page, and then the tab routing points to the actual tabs

I did, but then deleted the tabs folder. I’m probably just going to go back to using that, as I literally haven’t done anything in my app cause I couldn’t get this to work. Unless you have a solution, of course.

I think the standard practice is having a tabs page to hold the tab bar and control the tab routing

1 Like