Unexpected redirect to RootPage using Lazy Loading


#1

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

#2

hello,

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

Best regards, anna-liebt


#3

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

#4

Hello,

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

Best regards, anna-liebt


#5

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.

#6

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.


#7

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


#8

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.


#9

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