Ionic-framework: Set rootPage on HomePage don't work using Lazy Loading

[Gabrielr47]

Ionic version: (check one with "x")
[ ] 2.x
[x] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

Current behavior:
When I acess the app in browser using other url then the root one the sidemenu Item "Início" does not works.

Expected behavior:

Go to HomePage.
Steps to reproduce:

Example that works:

Acess: https://minhasaude.io/
Acess in the sidemenu Ficha Médica then go back to Início, works fine.

Example that not works:

1 - Acess: https://minhasaude.io/#/login

2 - Push the sidemenu to go to Início. // this will not work, but if you go to Ficha Médica then go back to Início works.

app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = 'HomePage';
  fichaMedica:any = 'FichaMedicaPage';
  historico:any = 'HistoricoPage';
  medicos:any = 'MedicosPage';
  cartao:any = 'CartaoPage';
  sobre:any = 'SobrePage';
  inicio:any = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  openPage(page){
    this.rootPage = page;
  }

}

app.html:

<ion-menu [content]="content" class="menu-principal">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-list>
      <button ion-item (click)="openPage(inicio)" menuClose>
            <img name="img-ficha-medica" src="./assets/icon/menu/inicio.png" float-left class="app-icons">  <span float-left>Início</span>
      </button>
      <button ion-item (click)="openPage(fichaMedica)" menuClose>
          <img name="img-ficha-medica" src="./assets/icon/menu/ficha-medica.png" float-left class="app-icons">  <span float-left>Ficha Médica</span>
      </button>
      <button ion-item (click)="openPage(historico)" menuClose>
         <img name="img-historico" src="./assets/icon/menu/historico.png" float-left class="app-icons">  <span float-left>Histórico</span>
      </button>
      <button ion-item (click)="openPage(medicos)" menuClose>
        <img name="img-medicos" src="./assets/icon/menu/medico.png" float-left class="app-icons">  <span float-left>Médicos</span>
      </button>
      <button ion-item (click)="openPage(cartao)" menuClose>
        <img name="img-cartao" src="./assets/icon/menu/cartao.png" float-left class="app-icons">  <span float-left>Cartão</span>
      </button>
      <button ion-item (click)="openPage(sobre)" menuClose>
        <img name="img-sobre" src="./assets/icon/menu/sobre.png" float-left class="app-icons">  <span float-left>Sobre</span>
      </button>
    </ion-list>
  </ion-content>
</ion-menu>

<ion-nav id="nav" #content [root]="rootPage"></ion-nav>

Ionic info::

cli packages: (C:\Users\rodrigues\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 2.1.4
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.6.1

System:

    Node : v6.10.3
    npm  : 3.10.10
    OS   : Windows 10

Misc:

    backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having?

I attempted to duplicate your issue using the side menu starter, converted to lazy loading and was not able to.

I was able to duplicate it using your app, however. I also duplicated it starting with https://minhasaude.io/#/cartao and trying to navigate to the home page from the menu.

Thanks for using Ionic

[Gabrielr47]

Hi @kensodemann

The code is available here

Thanks for help me

[kensodemann]

The problem is that you are relying on the following property binding: <ion-nav id="nav" #content [root]="rootPage"></ion-nav> to change the page when you do this:

  openPage(page) {
    this.rootPage = page;
  }

However, if you reload while on a page other than the home page, this.rootPage is still set to 'HomePage' so when you try to navigate to 'HomePage' change detection doesn't pick anything up.

The solution is to change your openPage() method to call this.nav.setRoot(page); which also involves a couple other mods to the code to actually get nav from the view, etc.

Here is a modified app.component.ts that should work for you (at least it is working for me):

import { Component, ViewChild } from '@angular/core';
import { Platform, Nav } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

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

  rootPage: any = 'HomePage';
  fichaMedica: any = 'FichaMedicaPage';
  historico: any = 'HistoricoPage';
  medicos: any = 'MedicosPage';
  cartao: any = 'CartaoPage';
  sobre: any = 'SobrePage';
  inicio: any = 'HomePage';

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }

  openPage(page) {
    this.nav.setRoot(page);
  }
}

I will close this issue assuming that code will work for you. If it does not for some reason we can always reopen it.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.