Blank template on app reopen

I made an app. It works fine until I close it and reopen it. Then it just shows the Blank ionic template. You can find the app on the appstore here: https://play.google.com/store/apps/details?id=tk.splashpaintstudios.hockeyscheduleapp First time it works fine but when you reopen the app it fails.

Tha k you very much!

Can you try your app (debug version) with chrome dev tools or the safari variant? Maybe your app is throwing some errors. In a production app it is hard to find out.

Thank you for the reply. Yes, there are errors and they all have something to do with Admob:

localhost/:15 The key “viewport-fit” is not recognized and ignored.
core.js:3565 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
util.js:60 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
util.js:60 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
util.js:60 Native: tried calling AdMobFree.config, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
util.js:60 Native: tried calling AdMobFree.prepare, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ util.js:60
app.component.ts:36

On google chrome if I refresh, it seems fine. Also if I debug the app directly on the phone, there is no problem and the ads show but when I do the release apk, then it starts doing this.

The code of app.components.ts is:

import { Component } from ‘@angular/core’;
import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { AdMobFree, AdMobFreeBannerConfig} from ‘@ionic-native/admob-free’;
import { HomePage } from ‘…/pages/home/home’;
@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage:any = HomePage;
constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private admobFree: AdMobFree) {
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();
splashScreen.hide();
this.displayBanner();
});
}
displayBanner() {
const bannerConfig: AdMobFreeBannerConfig = {
// we will just use a test id for this tutorial
id: ‘ca-app-pub-6769732259836646/1877806036’,
isTesting: true,
autoShow: true,
};
this.admobFree.banner.config(bannerConfig);
this.admobFree.banner.prepare().then((result)=>{
console.log(result);
},(reason)=>{
console.log(reason);
});
}
}

I just used a simple tutorial online but all the online tutorials have this same code.
Also in app.module.ts, only lines 9 and 28 were added:

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { AdMobFree } from ‘@ionic-native/admob-free’;
@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
AdMobFree,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

Thank you very much again!

I think the errors occur because you are using ionic serve to debug in chrome and there is no cordova if you run it in browser.

Try to run a debug version on your emulator by using ionic cordova emulate android for example. Then open your chrome dev tools, click on the more button (…) -> More Tools -> Remote Devices. A new area in your dev tools should open where you can inspect your emulator. Does it outputs any errors, if you click inspect and look in the console of the window that opens? Does it show your result or reason you log to the console. Also add a console.log statement right between splashScreen.hide() and this.displayBanner(). Does it get printed to the console?

Sorry, I realized what I did was completely wrong. There are 4 tabs in the package:

about:blank - gives no errors

https://googleads.g.doubleclick.net/mads/static/mad/sdk/native/sdk-core-v40-loader.html - no error

https://googleads.g.doubleclick.net/mads/static/mad/sdk/native/sdk-core-v40-loader.html - no error

2018 Ice hockey PyeongChang Olympics Schedule - in this one there is: (this is name of app btww)

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.js:118968 Ionic Native: deviceready event fired after 1351 ms
vendor.js:58600 Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.
pluginWarn @ vendor.js:58600
vendor.js:58606 Install the StatusBar plugin: ‘ionic cordova plugin add cordova-plugin-statusbar’
pluginWarn @ vendor.js:58606
main.js.183: testing
main.js:196 OK

You can see the testing output from console.log() in the second-to-last line.

I realized, I cannot scroll the list in the app if I close and reopen it (I can from the start).
Also, when I close and reopen the app, in the app it gives me a debug error that there is a newer version to update and then it opens the blank template again.

No errors are given?
When I close and reopen the app the error is:

Deploy: Degub
A newer version of this app is available on this device.
Would you like to update or stay on the bundled version?
(This warning only appears in debug builds)

Then I have options Ignore or Update.

If I update, there is a new tab in the devloper tools called:

Ionic App
file:///data/user/0/tk.splashpaintstudios.hockeyscheduleapp/app_930885e1-e759-4668-91c8-415df805cec1/index.html
and no errors:

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.js:118613 Ionic Native: deviceready event fired after 1081 ms
vendor.js:58579 Native: tried calling StatusBar.styleDefault, but the StatusBar plugin is not installed.
pluginWarn @ vendor.js:58579
vendor.js:58585 Install the StatusBar plugin: ‘ionic cordova plugin add cordova-plugin-statusbar’

I am thinking if maybe it isnt just on my device? that my device has some other version saved.
If I do update, the admob stays there but the main tab changes from my app to the default blank app template. Also, the admob doesnt show on the release?

What commands are you using for building and deploying your app?

to debug it on my phone, I use

ionic cordova run android --device

to create the unsigned apk

ionic cordova build android --prod --release

Thank you

I don’t understand why your app tries to update itself. Try to uninstall the app first and then install it again. Have you tried to remove android platform and add it again? Maybe the plugins were not installed correctly. It still complains about missing cordova plugins.