Unexpected redirect to RootPage using Lazy Loading

lollocavs · April 5, 2018, 7:58pm

I’m developing a mobile app for treasure hunt game. Each step is linked on a given page and the history of all steps are described in a config.json file. So, I need to route page by lazy loading using string variables instead Component Instance.

However, after the first phase of the workflow (that has a fixed routing), when I call the Ionic navCtrl, the page is instantiated but a kind of popToRoot() method are call and the workflow starts from the beginning (RootPage)

Does anyone know why? Any suggestions to fix it or prevent this behavior?

Thanks in advance.

This is my Ionic Info:

cli packages: (/usr/local/lib/node_modules)
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0
global packages:
    cordova (Cordova CLI) : 8.0.0
local packages:
    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

anna_liebt · April 5, 2018, 8:27pm

hello,

maybe a piece of related code would help to find the problem.

Best regards, anna-liebt

lollocavs · April 7, 2018, 10:55am

Here some additional info:

// Page Component Prototype
import {  ManagerService } from './../../providers/manager-service/manager-service';
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
// import { ADVENTURES } from './adventures.mock';

@IonicPage()
@Component({
  selector: 'page-3-video',
  templateUrl: '3-video.html',
})
export class VideoPage3 {

  adventures: any[] = [];
   constructor(public navCtrl: NavController, public navParams: NavParams, private _manager: ManagerService) {
    this.adventures = this._manager.getInfo();
  }

  goToNextStep(step: number) {
    let nextNode = this._manager.nextStep(step);
    console.log('Next Node: ', nextNode);
    this.navCtrl.push(nextNode.page,nextNode.opt); // <-- Here I use Lazy Loading Dinamically
    /*
     * nextNode.page is a string
     * nextNode.opt is an object that contains data for the next Page Component
     */
  }
}
// Mapping Used by ManagerService
export const LAYOUT_MAP = {
  "3-VIDEO" : "VideoPage3", // <-- The key is used to select the string of Name Component
  "key2" : "page2",
  "key3": "page3",
  ...
  "keyN" : "pageN",
}

anna_liebt · April 7, 2018, 9:55pm

Hello,

okay. What is NextNode.page and what is export class of your page?

Best regards, anna-liebt

lollocavs · April 8, 2018, 9:39am

As written in the post above, nextNode.page is the string of the name of component returned by the object of the method nextStep(step) of ManagerService. The string is selected from the LAYOUT_MAP constant.

For the second question, I don’t well understand what you mean…
Every page has the same routine:

A method goToNextStep(step) that call the this._manager.nextStep(step) ;
The service return nextNode object as described above and the navCtrl.push() event is called ;
The page is constructed, but the unexpected redirect occurred.

lollocavs · April 8, 2018, 10:31am

In addiction,
I try to force the first-page selected by the routine described above to the root page (with the method navCtrl.setRoot('<first-page>').

The application enters in a loop where the page is constructed again and again.

anna_liebt · April 8, 2018, 12:17pm

Hello,
hhmm this kind of syntax I do not know. Should it be

navCtrl.setRoot('first-page');

Back to my above question. You call

this.navCtrl.push(nextNode.page,nextNode.opt);

nextNode.page should contain a string who it is exported from your .ts

export class whateverPage {

and call it as lazy loaded

navCtrl.setRoot('whateverPage');

Upper-lower CaSe counts.

If sure that both strings are indentically, we look further. (By the way, maybe it is worth rethinking your naming, because I personnally find
it confusing adding Number on the end of Page, mix upper lower case naming like Page and page, etc.)

Best regards, anna-liebt

lollocavs · April 8, 2018, 2:03pm

The component is load and the constructor method is called: so I think there is no misalignment. Otherwise, I should have an error in the navCtrl.push() call, isn’t it?

PS: The naming is a team convention, probably we will try to improve it.

anna_liebt · April 8, 2018, 9:18pm

Hello,

if you are sure that strings match excatly and constructor is called. Your Constructor has no direct call of anything related to a navcontroller. Is there something inside this._manager.getInfo()?

Has your page, that you want lazy load, a correct *.module.ts?

By the way your LAYOUT_MAP looks for me strange, because you wrap property 3-Video inside “”, otherway property can not begin with a number.

Best regards, anna-liebt

gnmuya · January 14, 2019, 12:35pm

Hello,

Has anyone gotten a solution to this? I am having a similar issue here. When i call this.navctrl.push(page) the app redirects back to the rootpage.

anna_liebt · January 14, 2019, 1:01pm

Hello,

show more code.
Best regrards, anna-liebt

gnmuya · January 14, 2019, 1:11pm

Hi Anna,
My home page is structured as follows:

import { Component } from '@angular/core';
import { NavController, IonicPage } from 'ionic-angular';

@IonicPage()

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  openPage(page){
    this.navCtrl.push(page);
  }

}

The openPage function is called from the html as follows:

<a color="dark" class="dashboardicons" (click)='openPage("FaqsPage")'  href="#"> <ion-icon name="ios-information-circle-outline" color="danger"></ion-icon>
              <br>FAQs</a>

I expect to navigate to FaqsPage once I click on the link above. It does so for the first time. On second and subsequent clicks, the FaqsPage flashes and then I’m redirected to the homepage

anna_liebt · January 14, 2019, 1:24pm

Hello,
I understand it so, that your push to FaqsPage is working, sort but working. Maybe something inside Faqspage is pushing you to homepage. Maybe you can add some livecyles to faqspage and document, at which lifecycle you get pushed to homepage. By the way you are using lazy loading everywhere or have you mixed eager and lazy loading?

Best regards, anna-liebt

gnmuya · January 14, 2019, 1:47pm

Hello,
Thank you for the insight. I am using lazy loading everywhere. I added a log to capture lifecycle events in the faqs page. Apparently it runs through all of them. Here is my FaqsPage:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-faqs',
  templateUrl: 'faqs.html',
})
export class FaqsPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FaqsPage');
  }

  ionViewWillEnter() {
    console.log('ionViewWillEnter FaqsPage');
  }

  ionViewDidEnter() {
    console.log('ionViewDidEnter FaqsPage');
  }

  ionViewWillLeave() {
    console.log('ionViewWillLeave FaqsPage');
  }

  ionViewDidLeave() {
    console.log('ionViewDidLeave FaqsPage');
  }

  ionViewWillUnload() {
    console.log('ionViewWillUnload FaqsPage');
  }

  ionViewCanEnter() {
    console.log('ionViewCanEnter FaqsPage');
  }

  ionViewCanLeave() {
    console.log('ionViewCanLeave FaqsPage');
  }
}

gnmuya · January 14, 2019, 2:06pm

console

here is the console output when I hit the link from home page

anna_liebt · January 14, 2019, 8:38pm

hello,
If I understood it correct, at first click it stops and followed clicks it runs through.
Okay, can you provide full code of html and ts from Faqspage.
An additional Question: Do you use angular routes anywhere?

Best regards, anna-liebt

gnmuya · January 15, 2019, 5:57am

Hi,
You got it right. Here is the ts file for the FaqsPage.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-faqs',
  templateUrl: 'faqs.html',
})
export class FaqsPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FaqsPage');
  }

  ionViewWillEnter() {
    console.log('ionViewWillEnter FaqsPage');
  }

  ionViewDidEnter() {
    console.log('ionViewDidEnter FaqsPage');
  }

  ionViewWillLeave() {
    console.log('ionViewWillLeave FaqsPage');
  }

  ionViewDidLeave() {
    console.log('ionViewDidLeave FaqsPage');
  }

  ionViewWillUnload() {
    console.log('ionViewWillUnload FaqsPage');
  }

  ionViewCanEnter() {
    console.log('ionViewCanEnter FaqsPage');
  }

  ionViewCanLeave() {
    console.log('ionViewCanLeave FaqsPage');
  }
}

and here is the HTML

<ion-header>

  <ion-navbar>
    <ion-title>Faqs</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

</ion-content>

I am not using angular routes in the app at the moment.

Thank you

gnmuya · January 16, 2019, 6:43am

Hello,

Any further guidance on this? I’d really appreciate.

Thanks

anna_liebt · January 25, 2019, 1:08pm

Hello,

hope you solved it. If not: What I would do is a stop at nextstep and check each call and content of variable.

Hope, I am to late, anna-liebt

gnmuya · April 17, 2019, 7:50am

All I had to do was remove the href in the anchor link tag. Now it works like a charm . It was a conflict between the click event and the default event of navigating to the href when one clicks on a link. I had tried using event.stopPropagation() but it didn’t work either. Removing the href attribute did the magic for me.

Thank you for your insight