Beta 3 vs. Beta 4 + Sqlite

Ionic Framework ionic-v3
1

First Issue:

Beta 3:

In a page’s onPageWillEnter() I get the relevant records from Sqlite, the page animates into view with the records already in place.

Beta 4:

No changes to the code, but now the page loads with no data and then a moment later it flashes into the view.

Second Issue:

My root page is a list of clients, in beta 3 they would all be visible on load. Now with beta 4, again with no change to the code, the root page loads empty, only when I open the side menu do they flash into the view.

Both issues exist both in Chrome and on an Android device. Is anybody experiencing the same issues?

2

I assume the issue is because you are initially setting the data to be empty, and then loading in the data afterwards. The problem with this is that the UI is already set and doesn’t know to update, until some interaction with the UI is performed causing it to “refresh”.

An easy way to fix this is to use NgZone, simply import it:

import {NgZone} from 'angular2/core'

inject NgZone into your constructor and assign it to a variable like this.zone

and then whenever you are running code that will updates some data that is being displayed, run it inside of the run method, like this:

this.zone.run({
     this.data = someData;
});
1 Like
3

In my constructor I’m setting the data = [], but then in the onPageWillEnter() I’m using Ionic’s SqlStorage to get the data from Sqlite and assigning that data to the data property. Am I wrong to assume that by using Ionic’s Storage and SqlStorage that all processing is happening within Angular?

I did try the your example and it’s just erroring out like crazy!

4

Someone else might be able to talk about the low level technical details of NgZone, it’s still reasonably new to me. Feel free to post the code you tried here so we can see what might be wrong.

5

For the record, the problem went away with the update to Beta5/6, it wasn’t me… this time!!

1 Like
6

I too have had the exact same issue as originally posted.

Whilst your workaround using NgZone does indeed work, this doesn’t seem right. Everything was working without this workaround before updating the Ionic framework to the latest beta.

Additionally, other data items/variables bound to the views update the views just fine, e.g. text values without usage of NgZone, so why should this data array have to be treated any differently?

What am I missing?

7

Have you updated to beta.6? Everything is working as it did before beta.4 broke it.

8

I did update yes, the problem persists: from npm outdated on my machine:

ionic-angular 2.0.0-beta.6

Any ideas? This “ngZone” workaround seems nasty.

9

Sorry, I have no ideas as I never knew exactly what the cause was to begin with, and now that it’s gone on it’s own it’s even more baffling. Very strange and concerning that you’re on beta.6 and still have the problem.

10

Here’s the short answer about the cause of the issues in beta.4 (details in the linked post):

11

@Daveshirman Did you upgraded to beta.6 following the steps in this guide (because there are few required changes in addition to updating the dependencies in package.json)?

If not - make sure to check all steps in the guide (especially steps 3 & 4) and make the needed changes.

If yes - could you please provide some more details, e.g. the output of ionic info, affected code, etc?

1 Like
12

Hi, thanks for your reply. I followed the steps in the guide and the error is now fixed.

I feel like this information should be more obviously located for others with the issue, so I’ve posted a stackoverflow question here with this answer.

Thanks again.