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?

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)

1 post - 1 participant

Read full topic