ionic-framework: bug: angular, tabs does not support root path (without /tabs)

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:

Start a new Ionic Angular project (ionic start tabs-issue tabs --type=angular)
Remove /tabs path from tabs.router.module.ts (see related code)
Start the app
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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 12
Comments: 17 (3 by maintainers)

Most upvoted comments

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? 👍

+13

bijanmmarkes on Jul 2, 2019

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

+12

nickmeulen on May 16, 2019

Tabs needs a tabs prefix -> https://github.com/ionic-team/ionic/blob/master/angular/src/directives/navigation/ion-tabs.ts#L62

This comes from the intern ion-router-outlet -> https://github.com/ionic-team/ionic/blob/master/angular/src/directives/navigation/ion-router-outlet.ts#L62

But you removed it, so he uses “tab1” which is now his prefix.

@manucorporat Could you say if this is needed or could you add a check if there is no tabsPrefix

paulstelzer on Jan 4, 2019

Hello folks, is there any update on this issue please? It will be really helpful to get a fix. Please let me know if any part of the issue is not clear, I can try to reproduce the issue and share the corresponding code for investigation. Please help. Thanks.

supabitra on Jul 20, 2020

https://github.com/ionic-team/ionic/blob/53fc8e37c89cea793d0e00246d52805166730108/angular/src/directives/navigation/ion-router-outlet.ts#L77 I found this line that wrongly reads tabsPrefix if your route consists of only one segment. So if your tab route is just /home then getUrl returns /home and IonRouterOutlet saves it as a tabs prefix which is wrong and breaks other things. I tried changing this line to: this.tabsPrefix = tabs === 'true' ? '/' : undefined; and it seems to be working. Ionic team, please make a way to override this. The first idea that comes to my mind is providing a new InjectionToken that IonRouterOutlet would optionally inject into its constructor and then and we would be able to set it by registering some value. What do you think?

ogix on May 28, 2020

@liamdebeasi is there any update on this issue. this is a real deal breaker for building pwa

ASHFAQPATWARI on Aug 30, 2019

@liamdebeasi I’m also looking to see if there has been any update to this.

I’d really like to get around the fact that ion-tabs require a prefix. I don’t want to have to customize my own tab bar, but I also don’t want to have /tabs in my url.

edlo on Sep 23, 2019

The url prefix should be the path of the component where we put the tabs. In my case, I can’t place tabs at the root of the app. And I can’t neither place the word “tabs” in the url because of the nested router bug (#17992), I need to share tabs router with some others no-tabbed components.

roxteddy on Jul 1, 2019

https://github.com/ionic-team/ionic/blob/53fc8e37c89cea793d0e00246d52805166730108/angular/src/directives/navigation/ion-router-outlet.ts#L77

I found this line that wrongly reads tabsPrefix if your route consists of only one segment. So if your tab route is just /home then getUrl returns /home and IonRouterOutlet saves it as a tabs prefix which is wrong and breaks other things. I tried changing this line to: this.tabsPrefix = tabs === 'true' ? '/' : undefined; and it seems to be working. Ionic team, please make a way to override this. The first idea that comes to my mind is providing a new InjectionToken that IonRouterOutlet would optionally inject into its constructor and then and we would be able to set it by registering some value. What do you think?

any way we can get this option?

jonathan-chin on Jun 20, 2020

Glad I found a thread of people with the same issue as me. This was so hard for me to try and solve haha

ghost on Jan 1, 2020