Hello everyone. I’m currently working on mobile app using ionic, but recently I faced an obstacle.
1: Whenever I run the app on browser ionic serve --lab it runs perfectly.
2:When I run the application on android real device, it can’t open the app and sticks with the first view, and it never vanishes the default spinner, however while I debug the app using chrome://inspect, there it shows the login page.
I’m gonna provide some screen shots as well.
The app is runs on real device, but never shows this (login) page. However on chrome it works perfectly.
This is the spinner page.
Here is my app.component.ts file.
import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Push, PushObject, PushOptions } from '@ionic-native/push';
import { Storage } from '@ionic/storage';
import { App } from 'ionic-angular';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { AboutPage } from '../pages/about/about';
import { CartPage } from '../pages/cart/cart';
import { timer } from "rxjs/observable/timer";
import { LoginPage } from '../pages/loginPages/loginMainPage/login';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = LoginPage;
showSplash = true;
pages: Array<{ title: string, component: any, icon }>;
sendGetRequest() {
// ****** Pack the all return in the new promise ******
return new Promise(async (resolve, reject) => {
await this.storage.length().then(async (data) => {
if (data >= 1) {
console.log('There is one data');
await this.storage.get('isLogined').then(value => {
console.log('value is', value);
// if (value) this.app.getActiveNav().setRoot(LoginPage);
}
);
this.statusBar.styleDefault();
this.splashScreen.hide();
}
}).catch((error) => {
console.log('error while accessing isLogined \n' + error);
reject(error);
})
});
}
constructor(private push: Push,
public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen,
public storage: Storage,
public app: App) {
console.log('The fist line of constructor ');
this.platform.ready().then(async () => {
timer(3000).subscribe(async () => {
await this.sendGetRequest();
this.showSplash = false;
})
})
}
ngOnInit() {
console.log('ngOnInit');
this.pushSetup();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'خانه', component: HomePage, icon: 'home' },
{ title: 'پروفایل', component: ListPage, icon: 'person' },
{ title: 'سبد خرید', component: CartPage, icon: 'cart' },
{ title: 'درباره', component: AboutPage, icon: 'person' },
];
}
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.
this.statusBar.styleDefault();
this.splashScreen.hide();
timer(3000).subscribe(() => this.showSplash = false)
});
}
pushSetup() {
// to check if we have permission
this.push.hasPermission().then((res: any) => {
if (res.isEnabled) { console.log('We have permission to send push notifications'); } else {
console.log('We do not have permission to send push notifications');
}
});
const options: PushOptions = {
android: { senderID: "551951714209", },
ios: { alert: 'true', badge: true, sound: 'false' },
};
const pushObject: PushObject = this.push.init(options);
pushObject.on('notification').subscribe((notification: any) => console.log('Received a notification', notification));
pushObject.on('registration').subscribe((registration: any) => console.log('Device registered', registration.registrationId));
pushObject.on('error').subscribe(error => console.error('Error with Push plugin', error));
}
}
Note: let me know if I need to upload more stuffs.