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:
- add page for tabs container
- add pages for tabs
- make tabs container page your root url of the app
- 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 { }
- 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

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

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 {}
- 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.
165
You must be logged in to post a comment.