Problem loading the app

Ionic Framework ionic-v3
1

Hi there!

I tried to build my app on different angular/ionic versions and came to the same problem.

When I run ionic cordova run android, the app starts almost always. Then I close the app and open it from my phone. Splashscreen with the spinner comes up and never loads.

25323472_10210909316197487_1819502856_n
25323472_10210909316197487_1819502856_n.jpg350×720 15.1 KB

However my config.xml is contains as follows:
<preference name="SplashScreen" value="screen" />
<preference name="SplashMaintainAspectRatio" value="tru" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="ShowSplashScreenSpinner" value="false" /> (During normal start the spinner doesn’t come up, but the second time it comes up)
<preference name="AutoHideSplashScreen" value="true" />
<preference name="SplashScreenDelay" value="3000" />

Just in case I also tried to use splashscreen hiding from code:
constructor(public _SplashScreen: SplashScreen)
{
initializeApp();
}
initializeApp() {
this.platform.ready().then(() => {
this._SplashScreen.hide();
}
}

But the same problem.

One more thing. Sometimes when I start the app some message comes up on my phone but disappears fast and I cant read it. Something about Debug Deploy and containing buttons Ignore and Update.

Can you hint where should I search for problem?

There are no errors, no warnings, nothing. Over than this problem the app works perfectly.

Thank you very much in advance.

2

So inspecting it with chrome developer tools doesn’t reveal anything?

3

The strange thing is that in Inspect I can see the app started. But on my phone (Galaxy Note 8 and also Google Nexus 6p) there’s the screen I have posted (Splash Screen and Spinner)

ionic-bug
ionic-bug.jpg1596×742 131 KB

4

Interesting.

Two things.

First, what does ionic info output?

Actually, three things.

Second, what does your package.json look like?

Third, have you tried removing the splash screen plugin? This isn’t a valid solution, naturally. I’d just because what it’d do in that case.

5

Ionic Info:

cli packages: (C:\Users\User\AppData\Roaming\npm\node_modules)

@ionic/cli-utils  : 1.17.0
ionic (Ionic CLI) : 3.17.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 3.1.5
Cordova Platforms  : android 6.3.0 ios 4.5.1
Ionic Framework    : ionic-angular 3.9.2

System:

Android SDK Tools : 25.3.1
Node              : v7.5.0
npm               : 4.1.2
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\User\AppData\Local\Android\sdk

Misc:

backend : pro

Package.json:

{
“name”: “HayPost”,
“author”: “Mikayel Saghyan”,
“homepage”: “http://www.haypost.am”,
“private”: true,
“scripts”: {
“build”: “ionic-app-scripts build”,
“clean”: “ionic-app-scripts clean”,
“lint”: “ionic-app-scripts serve”,
“serve”: “ionic-app-scripts lint”,
“ionic:build”: “npm run build”,
“ionic:serve”: “npm run serve”,
“ionic:lint”: “npm run lint”
},
“dependencies”: {
“@angular/common”: “5.0.0”,
“@angular/compiler”: “5.0.0”,
“@angular/compiler-cli”: “5.0.0”,
“@angular/core”: “5.0.0”,
“@angular/forms”: “5.0.0”,
“@angular/http”: “5.0.0”,
“@angular/platform-browser”: “5.0.0”,
“@angular/platform-browser-dynamic”: “5.0.0”,
“@ionic-native/core”: “4.3.1”,
“@ionic-native/device”: “^4.5.2”,
“@ionic-native/geolocation”: “^4.5.2”,
“@ionic-native/in-app-browser”: “4.3.1”,
“@ionic-native/native-storage”: “^4.5.2”,
“@ionic-native/push”: “^4.5.2”,
“@ionic-native/splash-screen”: “4.3.1”,
“@ionic-native/status-bar”: “4.3.1”,
“@ionic/storage”: “^2.1.3”,
“cordova-android”: “~6.3.0”,
“cordova-ios”: “^4.5.2”,
“cordova-plugin-console”: “^1.0.7”,
“cordova-plugin-crosswalk-webview”: “^2.3.0”,
“cordova-plugin-device”: “^1.1.6”,
“cordova-plugin-geolocation”: “^2.4.3”,
“cordova-plugin-inappbrowser”: “^1.7.1”,
“cordova-plugin-ionic”: “^2.0.1”,
“cordova-plugin-ionic-keyboard”: “^2.0.2”,
“cordova-plugin-ionic-webview”: “^1.1.15”,
“cordova-plugin-ionic-wkkeyboard”: “^1.1.15”,
“cordova-plugin-nativestorage”: “^2.2.2”,
“cordova-plugin-recentscontrol”: “^1.1.0”,
“cordova-plugin-splashscreen”: “^4.0.3”,
“cordova-plugin-statusbar”: “git+https://github.com/apache/cordova-plugin-statusbar.git”,
“cordova-plugin-whitelist”: “^1.3.2”,
“firebase”: “^3.5.3”,
“ionic-angular”: “3.9.2”,
“ionicons”: “3.0.0”,
“ng2-translate”: “^3.1.3”,
“phonegap-plugin-push”: “^2.1.0”,
“rxjs”: “5.5.2”,
“zone.js”: “0.8.18”
},
“devDependencies”: {
“@ionic/app-scripts”: “3.1.5”,
“typescript”: “~2.4.2”
},
“config”: {
“ionic_aot_write_to_disk”: true
},
“cordova”: {
“platforms”: [
“ios”,
“android”
],
“plugins”: {
“cordova-plugin-crosswalk-webview”: {
“XWALK_VERSION”: “22+”,
“XWALK_LITEVERSION”: “xwalk_core_library_canary:17+”,
“XWALK_COMMANDLINE”: “–disable-pull-to-refresh-effect”,
“XWALK_MODE”: “embedded”,
“XWALK_MULTIPLEAPK”: “true”
},
“cordova-plugin-device”: {},
“cordova-plugin-inappbrowser”: {},
“cordova-plugin-whitelist”: {},
“cordova-plugin-ionic-webview”: {},
“cordova-plugin-ionic-wkkeyboard”: {},
“cordova-plugin-statusbar”: {},
“cordova-plugin-console”: {},
“cordova-plugin-splashscreen”: {},
“cordova-plugin-recentscontrol”: {},
“phonegap-plugin-push”: {
“FCM_VERSION”: “11.0.1”
},
“cordova-plugin-geolocation”: {},
“cordova-plugin-nativestorage”: {},
“cordova-plugin-ionic”: {
“APP_ID”: “c6264b19”,
“CHANNEL_NAME”: “Master”,
“UPDATE_METHOD”: “background”,
“UPDATE_API”: “https://api.ionicjs.com”,
“MAX_STORE”: “2”
}
}
}
}

And I guess I cannot remove the plugin:
D:\IdeaProjects\PostMobile>ionic cordova plugins remove splashscreen

cordova plugin remove splashscreen --save
Error: The plugin ‘cordova-plugin-splashscreen’ is required by (cordova-plugin-ionic), skipping uninstallation. (try --force if trying to update)

[ERROR] An error occurred while running cordova plugin remove splashscreen --save (exit code 1).

6

Alright, so in your package.json you have:

“cordova-plugin-ionic”: {
  “APP_ID”: “c6264b19”,
  “CHANNEL_NAME”: “Master”,
  “UPDATE_METHOD”: “background”,
  “UPDATE_API”: “https://api.ionicjs.com”,
  “MAX_STORE”: “2”
}

I’m not super familar with the plugin, but according to the docs the background setting for update_method will download updates in the background and apply them the next time the app starts. Are you utilizing this plugin actively? Does your app work if you remove this section?

7

I noticed that using Chrome remote device when u use observable or other, can cause this strange issue…

Do this happened when you do the same scenario without to be connected to remote chrome ?

8

When I disconnect the USB cable and launch the app the same happens. But a message blinks for a second. I managed to printscreen it.

25323360_10210910055975981_346792647_n
25323360_10210910055975981_346792647_n.jpg467×960 32.1 KB

Maybe the app waits for an action for this alert, but the alert goes to the background making it impossible to do something?

And what causes this alert come anyway?

9

Plug the cable, run “ionic cordova run android --prod --device” but don’t connect chrome remote dev tools

10

That’d probably be the deploy plugin I mentioned, the cordova-plugin-ionic.

11

It had the same behaviour. After closing and reopening the app several times it started to work. And the message pops up and is clickable. And the app is loading with the message on top.

Maybe the version change (my app version) might help?

12

If you’re not using the deploy plugin I’d just remove it.

1 Like
13

Thank you! Works like charm!