ionic-team / ionic-team/ionic-framework

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

Open
#16,949 17 comments 12 reactions 0 assignees View on GitHub
package: angular type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Bug Report

**Ionic version:**
[x] **4.x**

**Current behavior:**
Using the `ion-tabs` component, clicking on `ion-tab-button`s 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:**
```javascript
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
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.