Page is not loading in ion-tabs

Question

I am trying to integrate ion-tabs in my ionic 4 app but the tabs are not showing. I just see ion-tabs at the bottom of the screen, nothing else. Moreover, when I try to click on any tab, it gives me following error:

Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'offered-services/offered-services'

This is my app-routing.module.ts:

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

const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'list',
    loadChildren: () => import('./list/list.module').then(m => m.ListPageModule)
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then(m => m.LoginPageModule)
  },
  {
    path: 'signup',
    loadChildren: () => import('./signup/signup.module').then(m => m.SignupPageModule)
  },
  {
    path: 'offered-services',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) //this loads the tabs
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

and this is my tabs.module.ts :

    import { NgModule } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { FormsModule } from '@angular/forms';

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

    import { TabsPageRoutingModule } from './tabs-routing.module';

    import { TabsPage } from './tabs.page';
    import { Routes } from '@angular/router';

    const routes: Routes = [
      {
        path: 'tabs',
        component: TabsPage,
        children: [
          {
            path: 'offered-services',
            loadChildren: '../offered-services/offered-services.module#OfferedServicesPageModule'
          },
          {
            path: 'services-cleaning',
            loadChildren: '../services-cleaning/services-cleaning.module#OfferedServicesPageModule#ServicesCleaningPageModule'
          },
          {
            path: 'services-home',
            loadChildren: '../services-home/services-home.module#ServicesHomePageModule'
          },
          {
            path: 'services-laundry',
            loadChildren: '../services-laundry/services-laundry.module#ServicesLaundryPageModule'
          }
        ]
      },
      {
        path: 'offered-services',
        redirectTo: '/tabs/offered-services',
        pathMatch: 'full'
      }
    ];

    @NgModule({
      imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        TabsPageRoutingModule
      ],
      declarations: [TabsPage]
    })
    export class TabsPageModule { }

and this is my `tabs.page.html` :

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="offered-services" (click)="offeredServicesSelected()">
      <ion-icon name="boat"></ion-icon>
      <ion-label>Iron</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="services-laundry" (click)="laundryServicesSelected()">
      <ion-icon name="logo-buffer"></ion-icon>
      <ion-label>Laundry</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="services-cleaning" (click)="cleaningServicesSelected()">
      <ion-icon name="nuclear"></ion-icon>
      <ion-label>Dry Cleaning</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="services-home" (click)="homeServicesSelected()">
      <ion-icon name="bed"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

This is my offered-services which I want to load as default tab:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>
      Services
    </ion-title>
    <div class="ion-padding cart-btn" slot="end">
      <ion-icon style="height:25px; width:25px;" name="cart"></ion-icon>
      <ion-badge id="cart-badge" color="danger">0</ion-badge>
    </div>

  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item>
      <ion-card class="welcome-card">
        <img src="../../assets/iron1.jpg" alt="" />
        <ion-card-header>
          <ion-card-subtitle>25$</ion-card-subtitle>
          <ion-card-title id="card-title">Item Washned & Ironed</ion-card-title>
        </ion-card-header>
        <ion-card-content style="display: contents;">
          <ion-item-divider>
            <ion-label class="ion-text-wrap" style="margin-top: 0px;">
              Some description about the service is going to land
              here for user to read and enjoy.
            </ion-label>
          </ion-item-divider>
          <ion-row class="quantity-row">
            <div id="quantity-div">
              <span>
                <ion-icon class="quantity-icons" name="add-circle-outline"></ion-icon>
              </span>
              <span id="quantity">&nbsp;0&nbsp;</span>
              <span>
                <ion-icon class="quantity-icons" name="remove-circle-outline"></ion-icon>
              </span>
            </div>
          </ion-row>
        </ion-card-content>
      </ion-card>

    </ion-item>

    <ion-item>
      <ion-card class="welcome-card">
        <img src="../../assets/iron1.jpg" alt="" />
        <ion-card-header>
          <ion-card-subtitle>25$</ion-card-subtitle>
          <ion-card-title id="card-title">Item Ironed Only</ion-card-title>
        </ion-card-header>
        <ion-card-content style="display: contents;">
          <ion-item-divider>
            <ion-label class="ion-text-wrap" style="margin-top: 0px;">
              Some description about the service is going to land
              here for user to read and enjoy.
            </ion-label>
          </ion-item-divider>
          <ion-row class="quantity-row">
            <div id="quantity-div">
              <span>
                <ion-icon class="quantity-icons" name="add-circle-outline"></ion-icon>
              </span>
              <span id="quantity">&nbsp;0&nbsp;</span>
              <span>
                <ion-icon class="quantity-icons" name="remove-circle-outline"></ion-icon>
              </span>
            </div>
          </ion-row>
        </ion-card-content>
      </ion-card>

    </ion-item>

    <ion-item>
      <ion-card class="welcome-card">
        <img src="../../assets/iron3.jpg" alt="" />
        <ion-card-header>
          <ion-card-subtitle>25$</ion-card-subtitle>
          <ion-card-title id="card-title">Iron Only Dozen</ion-card-title>
        </ion-card-header>
        <ion-card-content style="display: contents;">
          <ion-item-divider>
            <ion-label class="ion-text-wrap" style="margin-top: 0px;">
              Some description about the service is going to land
              here for user to read and enjoy.
            </ion-label>
          </ion-item-divider>
          <ion-row class="quantity-row">
            <div id="quantity-div">
              <span>
                <ion-icon class="quantity-icons" name="add-circle-outline"></ion-icon>
              </span>
              <span id="quantity">&nbsp;0&nbsp;</span>
              <span>
                <ion-icon class="quantity-icons" name="remove-circle-outline"></ion-icon>
              </span>
            </div>
          </ion-row>
        </ion-card-content>
      </ion-card>

    </ion-item>

  </ion-list>
</ion-content>

Thanks in advance.

Answer 1

In your main router, you are defining the path to the module tabs as

offered-services

In your tabs module, your are defining the base path as tabs and the subpath as offered-services. It becomes

tabs/offered-services

this mean your full path is

offered-services/tabs/offered-services

I'm not sure that's what you are looking for, You might want to set your parent path, of your tabs module to ''. this way, your path will look like this

offered-services/services-laundry 

/* ... */
    const routes: Routes = [
      {
        path: '',
        component: TabsPage,
        children: [
          {
            path: 'offered-services',
            loadChildren: '../offered-services/offered-services.module#OfferedServicesPageModule'
          },
/* ... */