tabs in ionic 4 without headache

Introduction

In this article, i am going to explain in steps on how to add tabs in your existing ionic 4 projects if you started from a blank project. I would recommend that if you haven’t started your project yet, start with the tabs option if you are sure your app is going to have tabs in them. It will save you from a good amount of headache. The command is :

ionic start <you_app_name> tabs

more details on how to add an ionic 4 project can be found here.

So i am writing this article so that anyone else who faced the same issue as me can find details of how to solve them and add tabs easily from here.

Installation

I am assuming that you are in a blank ionic project situation like I was. Now let’s list down the task we need to do to get the tabs working:

  1. add page for tabs container
  2. add pages for tabs
  3. make tabs container page your root url of the app
  4. make pages for tabs (2) children of the tabs container

Let’s begin

1. Add page for tabs container

In your ionic project you will run the ionic cli command for generating page like this

ionic g page <the/directory/where/you/want/your/page/pagename>

If you dont specify the directory, the page will be created directly inside the app folder. In my case, i am creating the tabs container page in the pages directory insiode the apps folder. so my command looks like this:

ionic g page pages/dashboard

where dashboard is my page name which holds the tabs structure.

2. Add pages for the tabs

you will use the ionic g page command again to create the tabs you desire. in my case, I am creating 2 tabs i.e home and profile in my dashboard page.

the command would like:

ionic g page pages/dashboard/home & ionic g page pages/dashboard/profile

right now if you check your app-routing.module file it will look like below:

import { NgModule } from '@angular/core';

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{ path: '', redirectTo: 'home', pathMatch: 'full' },

{ path: 'home', loadChildren: './home/home.module#HomePageModule' },

{ path: 'dashboard', loadChildren: './pages/dashboard/dashboard.module#DashboardPageModule' },

{ path: 'home', loadChildren: './pages/dashboard/home/home.module#HomePageModule' },

{ path: 'profile', loadChildren: './pages/dashboard/profile/profile.module#ProfilePageModule' },

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }
The following are the steps you need to do:
  • remove default home page folder
  • remove the default home route:
    { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  • remove the tabs routes for my case it is home and profile routes
   { path: 'home', loadChildren: './pages/dashboard/home/home.module#HomePageModule' },

   { path: 'profile', loadChildren: './pages/dashboard/profile/profile.module#ProfilePageModule' },
  • change the app root route from home to dashboard
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
  • change the tab container route to the following (route dashboard in my case)
   {

     path:"",

     loadChildren:"./pages/dashboard/dashboard.module#DashboardPageModule"

   }
3. Adding tabs html

now that the index route is defined to load the tabs container page the output should look like image below on running ionic serve command

default dashboard screen as index route in ionic 4
default dashboard screen

lets add the tabs html so that it will show the tabs we have defined instead of just the blank screen

Now when you open your <tabscontainer>.html file you will find the default html:

<ion-header>

<ion-toolbar>

<ion-title>dashboard</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding> </ion-content>
replace it with
<ion-content padding>

<ion-tabs>

<ion-tab-bar slot="bottom">

<ion-tab-button tab="home">

<ion-icon name="home"></ion-icon>

<ion-label>Home</ion-label>

</ion-tab-button>

<ion-tab-button tab="profile">

<ion-icon name="person"></ion-icon>

<ion-label>Profile</ion-label>

</ion-tab-button>

</ion-tab-bar>

</ion-tabs>

</ion-content>
Now your output should look something like the screenshot below:

 

index screen with tabs structure
index screen with tabs structure

but when you click on one of the tabs and you check the browser console you will find the following error:

You are getting this error because you have removed the default routes for home and profile from app-routing.module file . so the app doesn’t have any routes registered as of now to take the user to tab pages respectively. So let’s define those routes so that tabs will start working as expected

4. Define tabs routes

if you need to custom define routing for a specific page in ionic 4 you need to add the routing file in the page folder. In my case, i have add the file dashboard.router.module.ts  inside the dashboard page folder.

in the file add the following code:

import { NgModule } from "@angular/core";

import { RouterModule, Routes } from "@angular/router";

import { DashboardPage } from "./dashboard.page";

const routes: Routes = [

  {

     path:"",

     component:DashboardPage,

     children: [

      {

          path:"home",

          children: [

             {

                path:"",

                loadChildren:"./home/home.module#HomePageModule"

             }

          ]

       },

       {

         path:"profile",

         children: [

           {

             path:"",

             loadChildren:"./profile/profile.module#ProfilePageModule"

           }

         ]

      },

      {

        path:"",

        redirectTo:"home",

        pathMatch:"full"

       }

   ]

 },

 {

   path:"",

   redirectTo:"home",

   pathMatch:"full"

  }

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class DashboardPageRoutingModule {}
In the above code, we have defined the home and profile as children of dashboard and for default route we have defined redirection to home page which is our first tab.
Still the routing wont work as we have defined them but we need to declare the routing so the app would know that the routing is defined. For that, we need to the call the routing in the dashboard’s module file as follows:
  • remove the default routing in the tabscontainer.module file
    RouterModule.forChild(routes)
  • add the routing class inside the imports array:
    DashboardPageRoutingModule

the module file for tabs container will contains the code like below:

import { DashboardPageRoutingModule } from "./dashboard.router.module";

import { NgModule } from "@angular/core";

import { CommonModule } from "@angular/common";

import { FormsModule } from "@angular/forms";

import { Routes, RouterModule } from "@angular/router";

import { IonicModule } from "@ionic/angular";

import { DashboardPage } from "./dashboard.page";

const routes: Routes = [

{

path:"",

component:DashboardPage

}

];

@NgModule({

imports: [CommonModule, FormsModule, IonicModule, DashboardPageRoutingModule],

declarations: [DashboardPage]

})

export class DashboardPageModule {}

Conclusion

Now that if everything is added as shown above you have a working tabs in your app as shown in the gif below:

Hope this article helps you all if you are struggling with adding tabs and getting errors saying the routing is not defined all the time. I searched for weeks for the correct documentation on the internet but didnt find any so here is my contribution.

I am also attaching link to the github project if you want to look into the source code. click here.

Also if you have any sort of doubt regarding this topic, let me know in the comments section below. I am happy to help.

109
109