[4.0.0-rc.0] Broken ion-tab-buttons when /tabs path is removed

Bug Report

Ionic version: [x] 4.x

Current behavior: Using the ion-tabs component, clicking on ion-tab-buttons redirect to wrong URL when trying to remove /tabs from tabs.router.module.ts.

Expected behavior: Clicking on one ion-tab-button should redirect to correct URL.

Steps to reproduce:

1. Start a new Ionic Angular project (ionic start tabs-issue tabs --type=angular)
2. Remove /tabs path from tabs.router.module.ts (see related code)
3. Start the app
4. Try navigating from one tab to another

Related code:

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tab1',
        pathMatch: 'full'
      }
    ]
  }
];

Other information: To make it simple - While on /tab1, clicking on the second tab leads me to /tab1/tab2 instead of /tab2

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.3.1 (C:\Users\YDrogen\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v8.9.1 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

[bijanmmarkes]

This is true, what’s the point of clean URLs if we have to have a /tabs prefix. This makes for a very ugly URL scheme, and really is pointless as tabs should be invisible, not part of the URL.

Please, any information on this as this issue is a big one. I think forcing a /tabs prefix before each path is very dirty.

Any updates? 👍

[nickmeulen]

The need for a tabs prefix is highly inconvenient for good url patterns when building a pwa, especially when the tabs are at the root of the application. Works fine when using href instead of tab but the app it self reloads. Would be nice to be able to disable tabsPrefix