I’ve built an Ionic 2 app and got all the core functionality working.
It looks fine in the browser and in the Chrome emulator.
It’s a very minimal app.
I’ve created one service to access data via SqlStorage.
Beyond that there are no bells and whistles.
It really seems like this should “just work”.
However, in the Android emulator for the Galaxy S3 it looks completely different and the custom slider (for input range) doesn’t look right or work right at all.
On the S5 emulator and my own S3 device I just get a white screen.
On the Apple Emulator it looks and works perfect!
But on an actual iPhone, while it still looks great, functionally it doesn’t work at all (I’m guessing this has something to do with SqlStorage).
It’s annoying to have differences between the browser and the emulators, but I can deal with it.
However, it’s maddening to have differences between the emulators and the real devices.
I have absolutely no idea how to even begin debugging that.
Is there any general advice I can get to ensure my builds work more like I want them to?
Have you checked the Android version? the min version is 4.4 but i dare to think the recommended min version is 5.0.
Also check the difference in IOS version between your emulator and your phone.
1 Like
both the emulator and the phone were using iOS 6
I got the app working on an actual S5 with the same results as the iPhone.
I think the issue is with the database.
Do I need to do something to instantiate the database?
To debug you’ll need to post your DB service or i will not be able to tell why it breaks.
Also try using a gist since it will not use as much space in this post.
I’d like to keep the majority of my code proprietary and I know for a fact that it does work.
It’s just the data calls that are failing.
So this is the relevant part.
Try putting a name on your database, i don’t think thats the issue but better make sure:
import {Storage, SqlStorage} from 'ionic-angular';
import {Injectable} from 'angular2/core';
import {Http, HTTP_BINDINGS, Headers} from 'angular2/http';
@Injectable()
export class DB {
public db: Storage = new Storage(SqlStorage, {name: 'dbName'});
constructor(public http: Http){}
}
Also which version of ionic 2 are you using? ionic/ionic is pretty old i think.
I’m thinking it has something to do with my data retrieval technique.
I’m going to try switching to an events based system instead of relying so much on promises.
I’ll try naming my db next time I get a chance.
Can’t work on it for a few days unfortunately.
I’m using 2.0.0-beta.17
Thanks for your help!
Man beta.17 is the CLI version, what’s the version of the ionic framework?
Well that’s annoying.
I know I created this app after Beta was released but it installed Alpha anyway.
So I updated to beta.2 just now.
Thanks for that.
Since you’re updating now why not up to beta.3?
it wouldn’t let me
npm said beta.2 is the latest available
And the Beta version is giving me:
cannot resolve module 'ionic-framework/ionic’
but it’s giving me no information as to why or what file is causing it
I had this last night too, I changed references from ‘ionic-framework/ionic’ to just ‘ionic-framework’ and it works. I thought everything was switching to ionic-angular but maybe that’s beta 3.
Edit: I should note I’m working with:
Your system information:
Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v4.2.4
Thanks for that.
I did a search and couldn’t find a single instance of ionic-framework/ionic. 
Oh yeah i forgot, to update to beta.3 you need to change the npm package from ionic-framework to ionic-angular.
You need to change it in the package.json and in all requires in your app, don’t forget to clean your node_modules folder and re-install.
Thanks again for all your help.
I upgraded to beta.1 and am keeping it there for now just because there’s no hassle with that version.
I reworked the database to use Events instead of Promises and it works great now.
However, I’m now running into a black screen issue.
My app only has 2 pages.
One page loads fine, the other has a black screen.
Once again, the emulators are no help.
Nothing but white on an emulated S5, but the device has one working page and one black screen page.
Same issue on an iPhone except it works great on the emulator but I have the black screen issue on the device.
As for the iOs version, my friend has an iPhone 6 so I’m assuming he has iOS 9 which is the same as the emulator.
I created a custom input range slider since there’s no component equivalent in 2.0 with my own CSS to make it look like Ionic 1’s slider.
Could that be the problem?
Apparently the problem was with Ionic View.
I bought an iPod Touch just to test the damned thing.
Worked no problemo. 
Final report:
The problem wasn’t with Ionic View, it was with:
new Date().toLocaleDateString();
Apparently toLocaleDateString() is not supported on mobile devices.
So for anybody that shows up from Google, here’s the general advice I learned from this:
First, bare in mind that not all JS commands are available in mobile.
If you’re code isn’t working, comment out as much as you can until it is working.
Uncomment it out piece by piece until you find the bad code.
There’s probably a better way to do this using PhoneGap’s tools and wienre but I’m not quite there yet.
Your mileage may vary, but I find the stock JavaScript Date object virtually useless, and this also goes for the Angular pipes that use it. moment rules.
1 Like