Page seems to load twice

Ionic Framework ionic-v3
1

The page in my app seems to load twice. This is what appears in the log. The ---------------presenting code is called twice if called from constructor / ionViewDidLoad. The problem seems to have started after recent updates to Ionic.

[22:12:57]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production 
            mode. 
[22:12:57]  console.log: ---------------presenting 
[22:12:57]  console.warn: Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to 
            include cordova.js or run in a device/simulator 
[22:12:57]  console.warn: Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include 
            cordova.js or run in a device/simulator 
[22:12:59]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production 
            mode. 
[22:12:59]  console.log: ---------------presenting 
[22:12:59]  console.warn: Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to 
            include cordova.js or run in a device/simulator 
[22:12:59]  console.warn: Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include 
            cordova.js or run in a device/simulator
2

How are you navigating to this page?
Do you see some kind of reload visually?

3

The page is the first page loaded in the application loaded from app.component.ts using the standard code:

rootPage = ItemsPage;

app.html is also standard

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

The problem occurs on only this particular page.

4

The main issue is that my constructor has a loadingcontroller present before and dismiss after loading data from storage and the loadingcontroller never dismisses. This happens if the page is the first to be loaded. If another page is loaded then the problem doesn’t repeat! The other page is similar but doesn’t face this problem!!!
P.S. I’m not observing the duplicate loading behavior now but the loadingcontroller problem exists.

5

Just try this simple test. Create a new application baed on the blank template.

In the constructor for home.ts insert a console.log statement.

Serve and check the log. The console.log statement executes twice. This is messing up other components in my app.

6

I did try what you suggested:

PS C:\Users\Jan\Documents> ionic start easyitis blank
✔ Creating directory .\easyitis - done!
Fetching app base (https://github.com/driftyco/ionic2-app-base/archive/master.tar.gz)
✔ Downloading - done!
Fetching starter template blank (https://github.com/driftyco/ionic2-starter-blank/archive/master.tar.gz)
✔ Downloading - done!
✔ Updating package.json with app details - done!
✔ Creating configuration file ionic.config.json - done!
Installing dependencies may take several minutes!
> npm install
✔ Running command - done!
> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
✔ Running command - done!

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Run your app in the browser (great for initial development):
  ionic serve

Run on a device or simulator:
  ionic cordova run ios

Test and share your app on a device with the Ionic View app:
  http://view.ionic.io

? Link this app to your Ionic Dashboard to use tools like Ionic View? No

Go to your newly created project: cd .\easyitis
PS C:\Users\Jan\Documents> cd .\easyitis\
PS C:\Users\Jan\Documents\easyitis> code .

In Visual Studio Code I then changed home.ts to look like this:

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

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

  constructor(public navCtrl: NavController) {
    console.log('=== home.ts constructor ===');
  }

}

Then back to the command line:

PS C:\Users\Jan\Documents\easyitis> ionic serve
Starting app-scripts server: --port 8100 --livereload-port 35729 --address 0.0.0.0 - Ctrl+C to cancel
[17:48:17]  watch started ...
[17:48:17]  build dev started ...
[17:48:17]  clean started ...
[17:48:17]  clean finished in 3 ms
[17:48:17]  copy started ...
[17:48:17]  transpile started ...
[17:48:25]  transpile finished in 8.00 s
[17:48:25]  preprocess started ...
[17:48:25]  deeplinks started ...
[17:48:25]  deeplinks finished in 28 ms
[17:48:25]  preprocess finished in 35 ms
[17:48:25]  webpack started ...
[17:48:26]  copy finished in 8.86 s
[17:48:41]  webpack finished in 15.70 s
[17:48:41]  sass started ...
[17:48:42]  sass finished in 1.67 s
[17:48:42]  postprocess started ...
[17:48:42]  postprocess finished in 17 ms
[17:48:42]  lint started ...
[17:48:42]  build dev finished in 25.51 s
[17:48:43]  watch ready in 25.90 s
[17:48:43]  dev server running: http://localhost:8100/

[17:48:49]  lint finished in 6.64 s

It opens http://localhost:8100/ in Firefox. Here is the output of the console:

Angular is running in the development mode. Call enableProdMode() to enable the production mode.  main.js:3303:9
=== home.ts constructor ===  main.js:55573:9
Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator  main.js:44210:9
Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator  main.js:44210:9

So I don’t think I can replicate the problem.

My ionic info output:

global packages:

    @ionic/cli-utils : 1.1.2
    Ionic CLI        : 3.1.2

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-ionic-angular : 1.1.2
    Ionic Framework                 : ionic-angular 3.2.1

System:

    Node       : v6.10.3
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
7

Weren’t you running ionic serve -l before? If so, the two views it creates (for Android and iOS) each produce their own log messages, so oftentimes the console has every message twice (at least the messages sent to the log by the startup process of the app, once you start interacting with one of the views you will only get that view’s output)

2 Likes
8

Thanks. This makes sense.

9

I do this, to solve this.

1- Create a blank page with nothing inside, only a blank page
ionic generate page Blank

2 - I remove the header in the html, it is really a blank page.

2- Add it to the file src/app/app.module.ts normally. Like another pages.

3- In src/app/app.component.ts I declare rootPage: any = BlankPage; and inside constructor I do this:

this.storage.get('hasSeenTutorial')
.then((hasSeenTutorial) => {
if (hasSeenTutorial) {
this.rootPage = TabsPage;
} else {
this.rootPage = TutorialPage;
}
this.platformReady()
});

I declare rootPage and shortly thereafter it is changed. The blank page pops up and is changed.

10

Thank you for your solution fagianijunior! This works it was a real problem for me because my (heavy) initial rest api calls were fired twice everytime on my initial app page. I think this issue might also be related to this:
https://github.com/ionic-team/ionic/issues/12684 . I hope the Ionic team solves this soon because this issue is quite confusing.

11

there is still no solution for this…

12

i have the same problem.
I found out that the nav looks at the browser url first (on mobile you don’t see it)
then it navigates there, regardless what you set in nav [root]
ionic should check that and not load the page twice, this is again an annoying bug…
they only work on v4 for the future, ionic 3 ist ignored…