Ionic 4 ion-tabs navigation problem: When back button is pressed, it goes to the previous tab instead of previous page

Question

I have two apps: one is for service provider, another one is for normal user (sort of like grab & grab driver app). Both are pretty similar (except for some pages exclusive only for service provider) and one of the features is messaging & inquiries. The implementation of messaging for both apps are pretty similar.

I have a messenger page which have two tabs: chats & inquiry. Here comes the problem, when i navigate through the tabs in the user app, it seems to me that it's adding pages to the stack. The flow is like this:

1. I open the app, home page is showing
2. I open messenger page, chat tab is showing
3. I click on inquiry tab, inquiry tab is showing
4. I press back button and it goes back to chat tab (should go back to home page instead)

However, it works fine on the service provider app when the implementation in both apps are the same. Applying to the same situation as above, it works this way in service provider app (the way I want it to be working):

1. I open the app, home page is showing
2. I open messenger page, chat tab is showing
3. I click on inquiry tab, inquiry tab is showing
4. I press back button and it goes back to home page

Below are the codes, since both app are using the same code I'll paste them once:

messenger.ts:

<ion-tabs>
    <ion-tab-bar slot="top">

      <ion-tab-button tab="chats">
        <ion-label><strong>Chat</strong></ion-label>
      </ion-tab-button>

      <ion-tab-button tab="inquiries">
        <ion-label><strong>Inquiries</strong></ion-label>
      </ion-tab-button>

    </ion-tab-bar>
</ion-tabs>

mesenger.module.ts:

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 { MessengerPage } from './messenger.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: HealthMessengerPage,
    children: [
      {
        path: 'chats',
        loadChildren: '../chats/chats.module#ChatsPageModule'
      },
      {
        path: 'inquiries',
        loadChildren: '../inquiries/inquiries.module#InquiriesPageModule'
      },
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/chats',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [MessengerPage]
})
export class MessengerPageModule {}

I am not sure where did I do wrong. Can anyone help?

UPDATE

I can't seem to find out what caused this so I copied everything into a new project file and it works fine now.

Answer 1

change ion-back button

<ion-back-button [routerLink]="'/home'" defaultHref="home"></ion-back-button>