Tabs does not load pages

Ionic Framework
1

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

Captura de tela de 2020-05-24 12-45-56
Captura de tela de 2020-05-24 12-45-56803×683 37.2 KB

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

<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)
      },
    ]
  }
];
3

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();
  }
4

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

Captura de tela de 2020-05-25 14-53-59
Captura de tela de 2020-05-25 14-53-592045×969 131 KB

5

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>
2 Likes
6

Hi @joaopc23,
Currently I too face the same exact problem in my Ionic app. Initially when I login my tab navigation works fine, But when I logout and logged in again, Now only my first tabs page loads but I can’t switch to other pages. Url changes perfectly but my views are not rendering.
After googling they asked me to check Imports of core.css in Global.css I have checked that too. Second Your solution I’m already using “ion-router-outlet”
But no luck, please help me on this. It takes my whole day