How to display Ionic Tabs on all pages? - ionic-framework

Question

I'm currently developing a mobile app with Ionic 4. I build it with Ionic CLI but I did a blank project. I created some component (like login, signup...) and after that, I added Tabs from Ionic.
My problem is, Ionic Tabs are presents only on pages in tabs.router.module.ts. How can I do to display Tabs on all pages ?
Except them, every component are in app-routing.module.ts, I tried to cut and paste them in tabs.router.module.ts but I'm not sure that's a good thing to do.
tabs.routes.module.ts
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'home',
children: [
{
path: '',
loadChildren: '../home-page/tab1.module#HomePageModule'
}
]
},
{
path: 'game/new',
children: [
{
path: '',
loadChildren: '../game/create-game-page/tab2.module#CreateGamePageModule'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/home',
pathMatch: 'full'
}
];
For the moment my Tabs works, but I'm not sure to understand how they perfectly work. Thank you for your help.

Answer 1

Adding your routes as children to tabs in tab router file will let you acheive your goal.

Answer 2

If you want to display your tabs on every page put them into your app.component.html file.
Like:
<ion-app>
<ion-tab-button tab="tab1">
<ion-label>Label1</ion-label>
<ion-icon name="search"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-label>Label2</ion-label>
<ion-icon name="card"></ion-icon>
</ion-tab-button>
</ion-app>
Don't forget to create your Routes and your Routing in your app-routing.module.ts now.