Tabs does not load pages

I’m getting a strange behavior that occurs randomly, after sign in I cant change the tab, but the router changes the url.

When the router changes the URL its not even calling ngOnInit, but if I refresh the page everything back to work normally.

I would like some help on how to debug this or any clue where to look for this bug.

I have 2 routes one for authenticated users and other for non authenticated users with guards in each route.
Most of the time this occurs after authentication, I’m using angular fire 6.0


Ionic:

   Ionic CLI                     : 5.4.16
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.1
   @capacitor/core : 2.0.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.2.0 (/usr/bin/node)
   npm    : 6.14.5
   OS     : Linux 5.6
{
  "name": "Project",
  "version": "0.0.1",
  "author": "Joao Pasqualini Costa",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"


  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@capacitor/core": "2.0.1",
    "@ionic-native/core": "^5.26.0",
    "@ionic-native/splash-screen": "^5.26.0",
    "@ionic-native/status-bar": "^5.26.0",
    "@ionic/angular": "^5.1.1",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "core-js": "^2.5.4",
    "firebase": "^7.14.5",
    "ionic": "^5.4.16",
    "opensheetmusicdisplay": "^0.7.6",
    "rxjs": "~6.5.1",
    "tslib": "^1.13.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.20",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@capacitor/cli": "2.0.1",
    "@ionic/angular-toolkit": "^2.1.1",
    "@ionic/lab": "3.1.3",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^5.0.9",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "^7.0.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}

<ion-content>
  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="musics">
        <ion-label [translate]="'HOME.musics'"></ion-label>
      </ion-tab-button>

      <ion-tab-button tab="profile">
        <ion-label [translate]="'HOME.profile'"></ion-label>
      </ion-tab-button>

      <ion-tab-button tab="tab3">
        <ion-label>My Song</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="courses">
        <ion-label [translate]="'HOME.courses'"></ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>
</ion-content>

<ion-tabs (ionTabsDidChange)="tabChanged()" (ionTabsWillChange)="tabWillChanged()">

Added this 2 events to check if its calling when I click to change the tab, they are not beign fired

My App routing:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./index/index.module').then(m => m.IndexPageModule)
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
];

My Home Routing:

const routes: Routes = [
  {
    path: '',
    component: HomePage,
    canActivate: [HomeGuard],
    children: [
      {
        path: '',
        redirectTo: '/home/courses',
        pathMatch: 'full'
      },
      {
        path: 'courses',
        loadChildren: () => import('../pages/courses/courses.module').then( m => m.CoursesPageModule) 
      },
      {
        path: 'musics',
        loadChildren: () => import('../pages/musics/musics.module').then( m => m.MusicsPageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('../pages/profile/profile.module').then( m => m.ProfilePageModule)
      },
      {
        path: 'lessons',
        loadChildren: () => import('../pages/lessons/lessons.module').then( m => m.LessonsPageModule)
      },
    ]
  }
];

I’m using a subscription in each tab page.

import { Subscription } from 'rxjs';

private subscription: Subscription;

constructor(
    private router: Router) { }

  ngOnInit() {
    this.subscription = this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd && event.url.indexOf('home/musics') > 0) {
          this.yourAction();
        }
    });
  }

  public ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

Thank you for the replay, but this will not work because sometimes it doesnt even call the ngOnInit, it just call for the first tab and not load the children components of the others tabs, not even the constructor is called.
The router changes the link but no component is added to the DOM

Fixed the problem

I was using

<ion-content>
  <router-outlet></router-outlet>
</ion-content>

Changed to

<ion-content>
  <ion-router-outlet<></ion-router-outlet>
</ion-content>