Ionic-framework: Lazy Loaded rootPage component created twice

Created on 11 Nov 2017 · 8Comments · Source: ionic-team/ionic-framework

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x
[ ] 4.x

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

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
My app has a leaflet map on the rootPage. Every pages used by ionic lazy loading.

Sometimes in the browser, the main page brokes with the following error: "leaflet map already initialized".

I started to debug the bug and I recognized, that my map.component.ts (the rootPage) initialized twice. First (?), when the IonicPageModule parses the page, Second (?), when I update the app settings in app.component.ts:

this.rootPage = 'mapPage'.

Is it a known angular/ionic issue? Is there any known solution for this problem?

Other information:

Ionic info: :

    @ionic/cli-utils  : 1.16.0
    ionic (Ionic CLI) : 3.16.0
    cordova (Cordova CLI) : 7.1.0
    @ionic/app-scripts : 3.1.0
    Cordova Platforms  : android 6.3.0 ios 4.5.3
    Ionic Framework    : ionic-angular 3.9.2
    ios-deploy : 1.9.2
    Node       : v6.9.4
    npm        : 2.15.12

Source

petrot

Most helpful comment

Hi @kensodemann !

Here is my sample project:
https://github.com/petrot/ionic-lazy-load-bug

Instructions:

run ionic serve
when the browser starts, the console will write "HomePage constructor" message only once.
press F5 for refreshing the page
the console will write the message twice (on every manual page refresh).

I think, I found the problem, while I created the sample project:

initializeApp() {
    // this.rootPage = 'HomePage';  // <====  It will run only once
    this.platform.ready().then(() => {
      this.rootPage = 'HomePage';  // <==== bug palace, with this line the constructor will called twice

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

In my main project I read settings from local storage, then I update the rootPage in the platform.ready() block.

UPDATE

I found another solution: if the rootPage variable has an initial value (e.g. rootPage: string = 'HomePage'; instead of rootPage: string;), the constructor run only once.
Conclusion: always add an initial value to rootPage. Later we can overwrite it.

petrot on 13 Nov 2017

👍2

All 8 comments

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? Thanks for using Ionic!

kensodemann on 13 Nov 2017

Hi @kensodemann !

Here is my sample project:
https://github.com/petrot/ionic-lazy-load-bug

Instructions:

run ionic serve
when the browser starts, the console will write "HomePage constructor" message only once.
press F5 for refreshing the page
the console will write the message twice (on every manual page refresh).

I think, I found the problem, while I created the sample project:

initializeApp() {
    // this.rootPage = 'HomePage';  // <====  It will run only once
    this.platform.ready().then(() => {
      this.rootPage = 'HomePage';  // <==== bug palace, with this line the constructor will called twice

      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

In my main project I read settings from local storage, then I update the rootPage in the platform.ready() block.

UPDATE

petrot on 13 Nov 2017

👍2

Setting the initial value fixes the multiple call to the constructor. However if you want to set the rootPage according to an authState you will always see for an instant the set rootPage (e.g. the Login Page).

obbe79 on 26 Jan 2018

👍1

@obbe79 could you please elaborate on the point you made.

I have a sample code like

rootPage:string='firstPage';
private urlParameters: Array = [];
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,public shareService: ShareService) {
console.log("calling the constructor")
platform.ready().then(() => {
console.log("paltform ready")

});

when reloaded the both console logs I am able to see.

Thanks.

siddiq-rehman on 9 Aug 2018

😕1

@siddiq-rehman I don't know what the heck you're saying, according to your code, your code should call both console logs, that's correct. @obbe79 is mentioning that when you have a dynamic rootPage, like having a LoginPage and a HomePage, if you set an initial value (like LoginPage) the login screen will flash out before HomePage if the user's logged (when you set that dynamically later). And if do not set it initially and set it dynamically later, you'll load the page twice (at least when the route is the same). So, as I understand, you may not be referring to the same issue case here.

giovannipds on 21 Aug 2018

Steps to reproduce.

create a new tabs project in ionic3
on the tabs first/selected page.ts add an alert inside the constructor.
now run ionic serve -b
the alert is seen twice.. the constructor function is called twice not sure why :(

Chethannp on 25 Aug 2018

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!