Ion-tab-button with blank "tab" attribute is not working (for homepage)? Any alternative to have homepage url mysite.com and not mysite.com/home?

Ionic Framework Ionic Angular
1

I’m developing web/hybrid application. I’m using Ionic tabs. Everything works fine but what bothers me is that I have to have “url parameter” for homepage. For example (tab-page.component.html).


<ion-router-outlet></ion-router-outlet>
<ion-tabs  *ngIf="platform.is('hybrid')">
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon> Home
    </ion-tab-button>
    <ion-tab-button tab="favorites">
      <ion-icon name="heart"></ion-icon> Favorites
    </ion-tab-button>
    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon> Search
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

With that implementation my homepage url is for example mysite.com/home. For hybrid apps this is not a problem, but for web it is! Homepage url should be
mysite.com and NOT mysite.com/home. Any ideas how can I fix that?

My current tab-page-routing.modules.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabPageComponent } from './tab-page.component';

const routes: Routes = [
  {
    path: '',
    component: TabPageComponent,
    children: [
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        loadChildren: () => import('../home/home.module').then(m => m.HomeModule)
      },
      {
        path: 'favorites',
        loadChildren: () => import('../favorites/favorites.module').then(m => m.FavoritesModule)
      },
      {
        path: 'search',
        loadChildren: () => import('../search/search.module').then(m => m.SearchModule)
      },

    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabPageRoutingModule { }

app-routing.module.ts

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

const routes: Routes = [

  {
    path: 'about',
    loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/tab-page/tab-page.module').then(m => m.TabPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

If I simply remove keyword “home” (from component and routing module) tabs are not working anymore. Any help would be greatly appriciated. Thank you.

(currently I’m redirecting mysite.com to mysite.com/home but this really isn’t what I want)

2

I found one solution but it is so drity I’m embarrassed to post it here :slightly_smiling_face: anyway, if anyone wants it, I can post it… it’s working and at the end of a day that’s all it matters.

My personal opinion is that this should be fixed by Ionic Team - for example in ionic-conference-app. Ionic is meant for mobile and web, that is it’s main advantage, right? So to have home page at url mysite.com/home it just isn’t a good practise. In Ionic’s conference demo app it’s even worse because their “homepage” is for example “http://localhost:8889/app/tabs/schedule” :persevere: but it should be “http://localhost:8889/”.

3

I will write my solution (a little bit hacky but I couldn’t find a better one). Maybe it will help someone.

(I’m using Ionic 8 and Angular 18)

So what I did is

  1. I added redirection in app-routing.module.ts (path “home” to “”)
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [

  {
    path: 'about',
    loadChildren: () => import('./pages/about/about.module').then(m => m.AboutModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/tab-page/tab-page.module').then(m => m.TabPageModule)
  },
  {
    path: 'home',
    redirectTo: '',
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}
  1. Unfortunatelly 1. point is not enough because althought the home component is loaded when I click “home tab”, Ionic does not add “tab-selected” class to that element and that’s why it doesn’t get designed as active tab (because of redirection in 1. point). So the solution to “select” home tab is to use “selectedTab” attribute (which is an attribute of ion-tab-bar! - ion-tab-bar: Tab Bar Component with CSS Custom Properties).

(in code below I added #tabBar)

tab-page.component.html

<ion-router-outlet></ion-router-outlet>
<ion-tabs>

  <ion-tab-bar slot="bottom" #tabBar>
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon> Home
    </ion-tab-button>

    <ion-tab-button tab="favorites">
      <ion-icon name="heart"></ion-icon> Favorites
    </ion-tab-button>

  </ion-tab-bar>
</ion-tabs>
  1. In tab-page.component.ts I added routerSubscription & if url=“” (home page) than I select ‘home’ tab. Code:
import { Component, OnInit, ViewChild } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { IonTabBar, Platform } from '@ionic/angular';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-tab-page',
  templateUrl: './tab-page.component.html',
  styleUrls: ['./tab-page.component.scss'],
})
export class TabPageComponent  implements OnInit {

  private routerSubscription!: Subscription;

  constructor(
    public platform: Platform,
    private router: Router,
  ) { }

  @ViewChild('tabBar') tabBar!: IonTabBar;

  ngOnInit() {

    this.routerSubscription  = this.router.events.subscribe(async  event => {
      if (event instanceof NavigationEnd) {
        const url = event.urlAfterRedirects.split('/')[1];
        if (url == '') {
          this.tabBar.selectedTab = 'home';
        }
      }
    });
  }

  ngOnDestroy() {
    if (this.routerSubscription) {
      this.routerSubscription.unsubscribe();
    }
  }

}

So what above code does is that home tab si now really on home page:

Home tab url → http://mypage.com/ (and NOT http://mypage.com/home)
Favorites tab url → http://mypage.com/favorites

etc.

I hope the code will help someone so that he will not waste so much time as I did. If anybody founds a better solution, let me know.