Ionic 2 White Screen - Promise and Platform Ready

Ionic Framework ionic-v3
1

Ok, just getting to the brink of insanity! I have an SQLite database that I’m attempting to Create Tables on within platform.ready(). This works awesome within Ionic Serve with chrome, no issues at all. iOS 9.3 is another story. Seems that the promise doesn’t always return and results in a white screen. Now if I close the app and retry multiple times it will eventually work. From what i can tell my root page is executing/loading before my tables are done with their promise. FWIW the app will not even return a message from the promise when it white screens.

Heres my initializeApp within app.js:

  initializeApp() {
    this.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();
      this.storage = new Storage(SqlStorage, {name:'test', location:'default'});
      this.dbTablesInit().then(() => {
        console.log('complete');
      });
    });
  }

Here is my dbTablesInit

  dbTablesInit() {
    console.log('Create Tables');
    return Promise.all([
      this.createAccountsTable(),
      this.createAuditTable(),
      this.createProductsTable(),
      this.createObjectivesTable(),
      this.createPhotosTable(),
      this.createNotesTable()
    ]);
  }

and here is an example of the first function Create accounts.

  createAccountsTable() {
    return this.storage.query("CREATE TABLE IF NOT EXISTS accounts (id INTEGER PRIMARY KEY, email TEXT, password TEXT, firstname TEXT, lastname TEXT, agent TEXT)").then((data) => {
      if (data.res.insertId == 0) {
        console.log('-- SQL: Accounts Table: Already Exists');
      } else {
        console.log('-- SQL: Accounts Table: Created New');
      }
    }, (error) => {
      console.log('ERROR -> ' + error.err.message);
    });
  }

any advice would be appreciated. Is there any way to defer the first view loading until all the promises come back?

I’m using the latest version of cordova and ionic beta 7.

2

I use to set the rootPage in platform.ready to achieve this.

3

Something like this maybe? Think I tried this, but will give it another go.

this.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();
  this.storage = new Storage(SqlStorage, {name:'test',location:'default'});
  this.dbTablesInit().then(() => {
    this.rootPage = ProfilesPage;
  });


});
4

Same result, this is what Im getting back from my login in XCode:

DB opened: test <---- thats all I get nothing follows

But when it executes correctly, i get this below:

DB opened: test
{"tx":{"db":{"openargs":{"name":"test","location":"default","createFromLocation":0,"backupFlag":2,"existingDatabase":false,"dblocation":"nosync"},"dbname":"test"},"txlock":true,"readOnly":false,"executes":[],"finalized":true},"res":{"rows":{"length":1},"rowsAffected":0}}

Beer sounding good. Im trying to fix this before I start doing shots :slight_smile: But seriously any ideas?

5

Are you setting rootPage to null initially?

6

Yep, I set it to null and then load the root page when the promise comes back. As a side note while double checking your suggestion, I noticed that when it fails and goes to a white screen the memory consumption goes up to a gb or so before failing.

7

Could be a race-condition somewhere… but hard to tell when not seeing wht whole picture.

8

Sure is. I ended up using your solution of setting the root to null and running my create statements without promises. Seems the issue is with the promises somewhere. Gonna mark your last comment as the solution.

9

Have the same problem, this solutions is not work for me