[Solved] Ionic 3.6 - Problem with IonicPage url loading the wrong page

Hello everyone, i’m new here since i usually don’t post since i would rather find out the solution by myself then to take time from other people…

I’ve upgraded my ionic app to 3.6 and started working on IonicPage and Lazyloading but i have this bug (i guess you can call it that) that when i try to load the app from the url, it always show me the page i wrote in app.component.ts as setroot and not the page i was looking for.

In my app you have to login for using it so when the app si ready i check if the user is authenticated and change the root based on that.
Since i’m logged in, it takes me to http://192.168.1.4:8100/tabs/home/news that is the first page and first button of the tabs.
If i change to the other tabs, the link change correctly to http://192.168.1.4:8100/#/tabs/home/canali, but if i copy that link and paste it in a new window, the app show a white screen with the right link, then it change the link to http://192.168.1.4:8100/tabs/home/news and load that page, which is the page set as root when the platform.ready() function start since i’m logged in.

I guess the main problem is that i’m using Tabs because if i try to force the link directly on one of the pages like News (http://192.168.1.4:8100/news) or Channel (http://192.168.1.4:8100/canali) it works (it load news and it load channel).

Another example… if i’m logged in and i write the address of the Login Page (http://192.168.1.4:8100/#/login) it first load the page, then it takes me to the homepage (http://192.168.1.4:8100/tabs/home/news)… as far i as i know it looks like it load the first page correctly, and this mean ionicpage works correctly, but then the platform.ready() function start and it load the page set as root.

I’m not really sure whatd to do now… but i think the best idea would be to save in a variable the value of the deeplink and inside the platform.ready set the root as the deeplink if it’s not empy (since if i used the normal link http://192.168.1.4:8100, i’m not coming from a deeplink and it means it must work normally so take me to the login page or to the news page if i’m logged in). I’ve tryed looking around how to do this, but since the patch is so fresh i think no one had the same issue and the documentation say nothing about such functions…

This if of course just a fix, i think the bug is happening from using the Tabs, since it works correctly if i write the address directly (like http://192.168.1.4:8100/news)

I will post app.component.ts here since i guess you guys would need it to find out more about the issue…

EDIT: Reading this post, i think our problem are related since both have problem with Tabs: Deep linking / authentication / nested ion-views / ion-tabs mixture from hell
EDIT 2: another post with similar problem: Issue deep linking to tabs

Thanks for the help!

import { Component, ViewChild  } from '@angular/core';
import { Platform, Nav, AlertController, LoadingController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import * as firebase from 'firebase';
import { AuthService } from '../providers/auth-service';
import { ChannelService } from '../providers/channel-service';
import { PushService } from '../providers/push-service';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any;
  loading: any;

  constructor(platform: Platform, public authService: AuthService, public channelService: ChannelService, public pushService: PushService, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public statusBar: StatusBar, public splashScreen: SplashScreen) {
    firebase.initializeApp({});

    let self = this;

    platform.ready().then(() => {
      const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
        if(user) {
          firebase.database().ref('/users/' + user.uid).once('value').then((result) => {
            authService.initializeUser(result.val(), result.getKey());
            channelService.loadChannels();
            self.rootPage = 'TabsPage';
            unsubscribe();
          });
        } else {
          self.rootPage = 'LoginPage';
          unsubscribe();
        }
      });

      if(platform.is('cordova')) {
        statusBar.styleDefault();
        splashScreen.hide();

        pushService.initCordova();
      } else {
        pushService.initWeb();
      }
    });
  }
}

Problem solved by reading this bug in git: https://github.com/ionic-team/ionic/issues/12304

Looks like changing the name of the segment from tabs to something else solved the problem… now i have other issue but i guess i will be able to fix them!

The new problem is that the page load faster then my variable initialization, so i get error saying it can’t use it since it’s null, guess i will have to find a away to fix this now :smiley:

1 Like