How to display Ionic Tabs on all pages?

Ionic Framework
1

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'
  }
];

I have another problem with my tabs. When I am on the tab1 page, the good icon is highlight, but it’s not working for the tab2 page.

Tab One: http://www.noelshack.com/2019-05-6-1549062619-capture.png

Tab Two: http://www.noelshack.com/2019-05-6-1549062619-capture2.png

tab1.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: HomePageComponent }])
  ],
  declarations: [HomePageComponent]
})
export class HomePageModule {}

tab2.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CreateGamePageComponent } from './create-game-page.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild([{ path: '', component: CreateGamePageComponent }])
  ],
  declarations: [CreateGamePageComponent]
})
export class CreateGamePageModule {}

I have another and last problem with my Tabs. I have a header I loaded in app.component.html like this :

<ion-app>
  <app-header></app-header>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

But as you can see on screens before, the header is not visible…

For the moment my Tabs works, but I’m not sure to understand how they perfectly work. Thank you for your help.

2

Hey @Youtaka,

Could you please tell did you get any possible solution to display Ionic Tabs on all pages issue?

Thanks!

3

Hello @daminivyas, sorry for my late reply!
I didn’t find a good solution. The only way for me, it’s to put every routes inside the tabs router :confused:

I hope you’ll fix your problem ! =)

1 Like