App work on android emulator but not on real device


#1

Hi, I’m developing a application on ionic 2 who request data from api and display them.I have add some plugin and local image.
when i use “ionic serve --lab” my app work perfectly (except native the feature of local notification) and display the data i want.
but when I use "ionic view " or use the apk to test on my device its don’t work and just show nothing

How is this possible?

Meteo.ts the first view

import { Component } from '@angular/core';

import { NavController} from 'ionic-angular';
import { MeteoFactory } from '../../providers/MeteoFactory';

import { ApliPage } from '../Apli/Apli';

import { Storage } from '@ionic/storage';


@Component({
  selector: 'page-Meteo',
  templateUrl: 'Meteo.html',
  providers: [MeteoFactory]
})

export class MeteoPage 
{
	meteo_selectionne;
	meteo_favorite=[];
	meteo_not_favorite=[];
	favorites:Array<number>;


  	constructor(
  		private MeteoFactory:MeteoFactory,
  		public navCtrl: NavController,
		public storage: Storage
  		){
			  this.storage.ready().then(() => 
			 {
				// set a key/value
				//this.storage.set('favorites', [1,2]);
				// Or to get a key/value pair
				this.storage.get('favorites').then((favorites) => {
					this.favorites=favorites
					console.log('this.favorites', this.favorites);

					this.MeteoFactory.meteoRequest().then(meteo_selectionne => 
					{
						this.meteo_selectionne = meteo_selectionne;
						this.meteo_favorite=[];
						this.meteo_not_favorite=[];
						console.log('this.meteo_selectionne',this.meteo_selectionne)

						for (let i in this.meteo_selectionne)
						{
							console.log('this.meteo_selectionne[i]',this.meteo_selectionne[i])
							if(this.favorites.indexOf(this.meteo_selectionne[i].id)!=-1)
							{
								this.meteo_favorite.push(this.meteo_selectionne[i]);
							}
							else
							{
								this.meteo_not_favorite.push(this.meteo_selectionne[i]);
							}
						};

						
						console.log('meteo_favorite',this.meteo_favorite)
						console.log('meteo_not_favorite',this.meteo_not_favorite)
					});
				})
			});

		
		  }

	ionViewWillEnter()
	{
		
	}

  	loadApli(application)
  	{
		console.log('application',application)
  		this.navCtrl.push(ApliPage,{id:application.id});
  		console.log('loadapli proc');
  	}

	favorite(application)
	{
		console.log('favorite...')
		console.log('application',application)
		this.storage.ready().then(() => 
		{
			this.storage.get('favorites').then((favorites) => 
			{
				favorites.push(application.id)
				this.storage.set('favorites', favorites);
				this.favorites=favorites;
				console.log('this.favorites', this.favorites);
				location.reload();
			})
		});
	}

	defavorite(application)
	{
		console.log('defavorite...')
		console.log('application',application)
		this.storage.ready().then(() => 
		{
			this.storage.get('favorites').then((favorites) => 
			{
				this.favorites=favorites
				console.log('this.favorites',this.favorites)
				console.log('indexOf(application.id)',this.favorites.indexOf(application.id))
				while(this.favorites.indexOf(application.id)!=-1)
				{
					console.log('indexOf(application.id)',this.favorites.indexOf(application.id))
					console.log('this.favorites',this.favorites)
					this.favorites.splice(this.favorites.indexOf(application.id),1)
					console.log('this.favorites',this.favorites)
				}

				this.storage.set('favorites', this.favorites);
				this.favorites=favorites;
				console.log('this.favorites', this.favorites);
				location.reload();
			})
		});
	}

}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

//page
import { HomePage } from '../pages/home/home';
import { MeteoPage } from '../pages/Meteo/Meteo';
import { ApliPage } from '../pages/Apli/Apli';
import { BugReportPage } from '../pages/BugReport/BugReport';

import {gravityImage} from './pipes/gravityImage'
import {errorType} from './pipes/errorType'

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    MeteoPage,
    ApliPage,
    BugReportPage,
    gravityImage,
    errorType,
  ],
  imports: [
    IonicModule.forRoot(MyApp),
    //CloudModule.forRoot(cloudSettings),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    MeteoPage,
    ApliPage,
    BugReportPage
  ],
  providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}



#2

Probably a security thing, getting data works differently on devices than in the browser.

Did you remote debug the problem on the device already? Follow these instructions here to debug the problem in Chrome dev tools: https://ionic.zone/debug/remote-debug-your-app#android Look at the console and network tabs for errors.


#3

Thank you very much I reached to debug the app with this useful tool.
It was a problem with the storage plugin on the emulator I had managed to initialized one of my variable when i was familiarising with the plugin.
But i had a bad initialization on my phone.
Thank you again