Always White Screen


#1

Trying to go deep in my troubles with the white screen i followed the advice to build for browser and see what happen, this is the console log:

15:16:51.871 cordova.js:1010 adding proxy for Device
15:16:51.874 polyfills.js:3 XMLHttpRequest cannot load file:///C:/config.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
u @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMacroTask @ polyfills.js:3
(anonymous) @ polyfills.js:3
r.(anonymous function) @ polyfills.js:2
readConfig @ cordova.js:876
initAndShow @ SplashScreenProxy.js:127
(anonymous) @ SplashScreenProxy.js:133
build @ cordova.js:53
require @ cordova.js:68
localRequire @ cordova.js:49
exports.mapModules @ cordova.js:1340
(anonymous) @ cordova.js:1138
f @ cordova.js:649
Channel.fire @ cordova.js:777
(anonymous) @ cordova.js:1130
onScriptLoadingComplete @ cordova.js:1567
scriptLoadedCallback @ cordova.js:1584
(anonymous) @ cordova.js:1538
o @ polyfills.js:2
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
invoke @ polyfills.js:3
15:16:51.875 cordova.js:1010 adding proxy for SplashScreen
15:16:51.876 cordova.js:1010 adding proxy for StatusBar
15:16:51.878 StatusBarProxy.js:23 StatusBar is not supported
15:16:52.944 core.es5.js:3025 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
15:16:52.994 bootstrap.js:10 Ionic Native: deviceready event fired after 839 ms
15:16:53.003 StatusBarProxy.js:23 StatusBar is not supported

So, it seems that the guilty is the XMLHttpRequest but what can I do for solve the problem?
I built for Android the tabs template and leaving it untouched
I’m on Windows 7 x64 using latest versions of Ionic, Cordova and Android


#2

So you say this is an unchanged “tabs” template?

Post your ionic info output please.


#3

Here it is

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v8.1.0
    OS         : Windows 7
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

#4

Didn’t you get an error when ionic starting the project?

Ionic isn’t fit for npm5.x on Windows yet, please use an older version (by using an older node version). Create the project again and you won’t have this problem.


#5

Thanks for reply, I try with node 6.11 on Linux now, I’ll let you know


#6

Sadly, same problem: white screen in apk and this error building for browser

20:43:25.982 cordova.js:1010 adding proxy for Device
20:43:25.984 cordova.js:1010 adding proxy for SplashScreen
20:43:25.984 cordova.js:1010 adding proxy for StatusBar
20:43:25.984 polyfills.js:3 XMLHttpRequest cannot load file:///C:/config.xml. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
u @ polyfills.js:3
20:43:25.986 plugins/cordova-plugin-statusbar/src/browser/StatusBarProxy.js:23 StatusBar is not supported
20:43:26.979 main.js:3303 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
20:43:27.108 main.js:101325 Ionic Native: deviceready event fired after 887 ms
20:43:27.109 plugins/cordova-plugin-statusbar/src/browser/StatusBarProxy.js:23 StatusBar is not supported
root@ubuntu:~/tabs# ionic info

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1 
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3 browser 4.1.0 ios 4.4.0
    Ionic Framework                 : ionic-angular 3.3.0

System:

    Node       : v6.11.0
    OS         : Linux 4.8
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 3.10.10 

Would be useful to append the package.zip and/or the apk?


#7

No.

How exactly do you create the project and then build the app?


#8
ionic start tabs tabs
cd tabs
ionic cordova platform add android@6.2.3 --save
ionic cordova build android

similar thing for building for browser


#9

How come there are more platforms then?


#10

I wrote what I thought necessary…sorry
The complete sequence was

ionic start tabs tabs
cd tabs
ionic cordova platform add android@6.2.3 --save
ionic cordova platform add browser@4.1.0 --save
ionic cordova platform add ios@4.4.0 --save
ionic cordova build android
ionic cordova build browser

#11

I don’t know if it’s relevant to this particular issue, but please do not get in the habit of running npm and ionic as root.


#12

I try this too, I’m trying everything…:disappointed:


#13

Is there a config.xml file?


#14

config.xml

<widget id="io.ionic.starter" version="0.0.1"><name>MyApp</name><description>An awesome Ionic/Cordova app.</description><author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author><content src="index.html"/><access origin="*"/><allow-navigation href="http://ionic.local/*"/><allow-intent href="http://*/*"/><allow-intent href="https://*/*"/><allow-intent href="tel:*"/><allow-intent href="sms:*"/><allow-intent href="mailto:*"/><allow-intent href="geo:*"/><preference name="webviewbounce" value="false"/><preference name="UIWebViewBounce" value="false"/><preference name="DisallowOverscroll" value="true"/><preference name="android-minSdkVersion" value="16"/><preference name="BackupWebStorage" value="none"/><preference name="SplashMaintainAspectRatio" value="true"/><preference name="FadeSplashScreenDuration" value="300"/><!--
      Change these to configure how the splashscreen displays and fades in/out.
      More info here: https://github.com/apache/cordova-plugin-splashscreen
    
--><preference name="SplashShowOnlyFirstTime" value="false"/><preference name="SplashScreen" value="screen"/><preference name="SplashScreenDelay" value="3000"/><platform name="android"><allow-intent href="market:*"/><icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/><icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/><icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/><icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/><icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/><icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/><splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/><splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/><splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/><splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/><splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/><splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/><splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/><splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/><splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/><splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/><splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/><splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/></platform><platform name="ios"><allow-intent href="itms:*"/><allow-intent href="itms-apps:*"/><icon src="resources/ios/icon/icon.png" width="57" height="57"/><icon src="resources/ios/icon/icon@2x.png" width="114" height="114"/><icon src="resources/ios/icon/icon-40.png" width="40" height="40"/><icon src="resources/ios/icon/icon-40@2x.png" width="80" height="80"/><icon src="resources/ios/icon/icon-40@3x.png" width="120" height="120"/><icon src="resources/ios/icon/icon-50.png" width="50" height="50"/><icon src="resources/ios/icon/icon-50@2x.png" width="100" height="100"/><icon src="resources/ios/icon/icon-60.png" width="60" height="60"/><icon src="resources/ios/icon/icon-60@2x.png" width="120" height="120"/><icon src="resources/ios/icon/icon-60@3x.png" width="180" height="180"/><icon src="resources/ios/icon/icon-72.png" width="72" height="72"/><icon src="resources/ios/icon/icon-72@2x.png" width="144" height="144"/><icon src="resources/ios/icon/icon-76.png" width="76" height="76"/><icon src="resources/ios/icon/icon-76@2x.png" width="152" height="152"/><icon src="resources/ios/icon/icon-83.5@2x.png" width="167" height="167"/><icon src="resources/ios/icon/icon-small.png" width="29" height="29"/><icon src="resources/ios/icon/icon-small@2x.png" width="58" height="58"/><icon src="resources/ios/icon/icon-small@3x.png" width="87" height="87"/><splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/><splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/><splash src="resources/ios/splash/Default-736h.png" width="1242" height="2208"/><splash src="resources/ios/splash/Default-Landscape-736h.png" width="2208" height="1242"/><splash src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" height="1536"/><splash src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" height="2048"/><splash src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" height="768"/><splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/><splash src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" height="2732"/><splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/><splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/><splash src="resources/ios/splash/Default~iphone.png" width="320"/></platform><engine name="android" spec="~6.2.3"/><engine name="browser" spec="~4.1.0"/><engine name="ios" spec="~4.4.0"/><plugin name="cordova-plugin-console" spec="^1.0.5"/><plugin name="cordova-plugin-device" spec="^1.1.4"/><plugin name="cordova-plugin-splashscreen" spec="^4.0.3"/><plugin name="cordova-plugin-statusbar" spec="^2.2.2"/><plugin name="cordova-plugin-whitelist" spec="^1.3.1"/><plugin name="ionic-plugin-keyboard" spec="^2.2.1"/></widget>

#15

That doesn’t look right - something didn’t work on project creation.

Can you do ionic start tabs tabs --verbose and paste the complete output here please?


#16

of course

root@ubuntu:~# ionic start tabs tabs --verbose
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
[DEBUG] Getting plugin info for ionic
[DEBUG] Checking for latest plugin version of ionic@latest.
[DEBUG] Latest version of ionic@latest is 3.4.0.
[DEBUG] globalDeps=
✔ Creating directory ./tabs - done!
[INFO] Fetching app base
       (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
✔ Downloading - done!
[INFO] Fetching starter template tabs
       (https://github.com/ionic-team/ionic2-starter-tabs/archive/master.tar.gz)
✔ Downloading - done!
✔ Updating package.json with app details - done!
✔ Creating configuration file ionic.config.json - done!
[INFO] Installing dependencies may take several minutes!
> npm install
✔ Running command - done!
[DEBUG] localDeps=@ionic/cli-plugin-ionic-angular
> npm install --save-dev --save-exact @ionic/cli-plugin-ionic-angular@latest
✔ Running command - done!
> git init
✔ Running command - done!
> git add -A
✔ Running command - done!
> git commit -m "Initial commit" --no-gpg-sign
✔ Running command - done!

♬ ♫ ♬ ♫  Your Ionic app is ready to go! ♬ ♫ ♬ ♫

Run your app in the browser (great for initial development):
  ionic serve

Run on a device or simulator:
  ionic cordova run ios

Test and share your app on a device with the Ionic View app:
  http://view.ionic.io
  
? Link this app to your Ionic Dashboard to use tools like Ionic View? No

Go to your newly created project: cd ./tabs

#17

Now run ionic serve, then ionic cordova platform add android and then ionic cordova build android --verbose.


#18
root@ubuntu:~/tabs# ionic cordova platform add android
? The plugin @ionic/cli-plugin-cordova is not installed. Would you like to insta
ll it and continue? Yes
> npm install --save-dev --save-exact @ionic/cli-plugin-cordova@latest
✔ Running command - done!
> cordova platform add android --save
✔ Running command - done!
Using cordova-fetch for cordova-android@~6.2.2
Adding android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: io.ionic.starter
	Name: MyApp
	Activity: MainActivity
	Android target: android-25
Subproject Path: CordovaLib
Android project created with cordova-android@6.2.3
Discovered plugin "cordova-plugin-console" in config.xml. Adding it to the project
Installing "cordova-plugin-console" for android
Adding cordova-plugin-console to package.json
Saved plugin info for "cordova-plugin-console" to config.xml
Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project
Installing "cordova-plugin-device" for android
Adding cordova-plugin-device to package.json
Saved plugin info for "cordova-plugin-device" to config.xml
Discovered plugin "cordova-plugin-splashscreen" in config.xml. Adding it to the project
Installing "cordova-plugin-splashscreen" for android
Adding cordova-plugin-splashscreen to package.json
Saved plugin info for "cordova-plugin-splashscreen" to config.xml
Discovered plugin "cordova-plugin-statusbar" in config.xml. Adding it to the project
Installing "cordova-plugin-statusbar" for android
Adding cordova-plugin-statusbar to package.json
Saved plugin info for "cordova-plugin-statusbar" to config.xml
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.
          
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml
Discovered plugin "ionic-plugin-keyboard" in config.xml. Adding it to the project
Installing "ionic-plugin-keyboard" for android
Adding ionic-plugin-keyboard to package.json
Saved plugin info for "ionic-plugin-keyboard" to config.xml
--save flag or autosave detected
Saving android@~6.2.3 into config.xml file ...
✔ Copying default image resources into ./resources/android - done!
root@ubuntu:~/tabs# ionic cordova build android --verbose
[DEBUG] Loading global plugin @ionic/cli-plugin-proxy
[DEBUG] Throwing PLUGIN_NOT_INSTALLED for global @ionic/cli-plugin-proxy
[DEBUG] Loading local plugin @ionic/cli-plugin-cordova
[DEBUG] Loading local plugin @ionic/cli-plugin-ionic-angular
Running app-scripts build: --iscordovaserve --externalIpRequired --nobrowser

[15:34:01]  build dev started ... 
[15:34:01]  clean started ... 
[15:34:01]  clean finished in 3 ms 
[15:34:01]  copy started ... 
[15:34:01]  transpile started ... 
[15:34:05]  transpile finished in 4.03 s 
[15:34:05]  preprocess started ... 
[15:34:05]  deeplinks started ... 
[15:34:05]  deeplinks finished in 24 ms 
[15:34:05]  preprocess finished in 30 ms 
[15:34:05]  webpack started ... 
[15:34:05]  copy finished in 4.41 s 
[15:34:16]  webpack finished in 11.14 s 
[15:34:16]  sass started ... 
[15:34:17]  sass finished in 1.51 s 
[15:34:17]  postprocess started ... 
[15:34:17]  postprocess finished in 4 ms 
[15:34:17]  lint started ... 
[15:34:17]  build dev finished in 16.79 s 
> cordova build android
⠹ Running command [15:34:22]  lint finished in 4.26 s 
✔ Running command - done!
ANDROID_HOME=/root/Android/Sdk
JAVA_HOME=/usr/lib/jvm/java-8-oracle
Starting a Gradle Daemon (subsequent builds will be faster)
:wrapper

BUILD SUCCESSFUL

Total time: 9.543 secs
Subproject Path: CordovaLib
Starting a Gradle Daemon (subsequent builds will be faster)
The Task.leftShift(Closure) method has been deprecated and is scheduled to be removed in Gradle 5.0. Please use Task.doLast(Action) instead.
	at build_2jzaj9eu6orez4qrrowjd5tay.run(/root/tabs/platforms/android/build.gradle:137)
The JavaCompile.setDependencyCacheDir() method has been deprecated and is scheduled to be removed in Gradle 4.0.
Incremental java compilation is an incubating feature.
The TaskInputs.source(Object) method has been deprecated and is scheduled to be removed in Gradle 4.0. Please use TaskInputs.file(Object).skipWhenEmpty() instead.
:preBuild UP-TO-DATE
:preDebugBuild UP-TO-DATE
:checkDebugManifest
:CordovaLib:preBuild UP-TO-DATE
:CordovaLib:preDebugBuild UP-TO-DATE
:CordovaLib:checkDebugManifest
:CordovaLib:prepareDebugDependencies
:CordovaLib:compileDebugAidl
:CordovaLib:compileDebugNdk UP-TO-DATE
:CordovaLib:compileLint
:CordovaLib:copyDebugLint UP-TO-DATE
:CordovaLib:mergeDebugShaders
:CordovaLib:compileDebugShaders
:CordovaLib:generateDebugAssets
:CordovaLib:mergeDebugAssets
:CordovaLib:mergeDebugProguardFiles
:CordovaLib:packageDebugRenderscript UP-TO-DATE
:CordovaLib:compileDebugRenderscript
:CordovaLib:generateDebugResValues
:CordovaLib:generateDebugResources
:CordovaLib:packageDebugResources
:CordovaLib:processDebugManifest
:CordovaLib:generateDebugBuildConfig
:CordovaLib:processDebugResources
:CordovaLib:generateDebugSources
:CordovaLib:incrementalDebugJavaCompilationSafeguard
:CordovaLib:compileDebugJavaWithJavac
:CordovaLib:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
:CordovaLib:processDebugJavaRes UP-TO-DATE
:CordovaLib:transformResourcesWithMergeJavaResForDebug
:CordovaLib:transformClassesAndResourcesWithSyncLibJarsForDebug
:CordovaLib:mergeDebugJniLibFolders
:CordovaLib:transformNative_libsWithMergeJniLibsForDebug
:CordovaLib:transformNative_libsWithSyncJniLibsForDebug
:CordovaLib:bundleDebug
:prepareOrgApacheCordovaCordovaLib623DebugLibrary
:prepareDebugDependencies
:compileDebugAidl
:compileDebugRenderscript
:generateDebugBuildConfig
:generateDebugResValues
:generateDebugResources
:mergeDebugResources
:processDebugManifest
:processDebugResources
:generateDebugSources
:incrementalDebugJavaCompilationSafeguard
:compileDebugJavaWithJavac
:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
:compileDebugNdk UP-TO-DATE
:compileDebugSources
:mergeDebugShaders
:compileDebugShaders
:generateDebugAssets
:mergeDebugAssets
:transformClassesWithDexForDebug
Running dex in-process requires build tools 23.0.2.
For faster builds update this project to use the latest build tools.
:mergeDebugJniLibFolders
:transformNative_libsWithMergeJniLibsForDebug
:processDebugJavaRes UP-TO-DATE
:transformResourcesWithMergeJavaResForDebug
:validateSigningDebug
:packageDebug
:assembleDebug
:cdvBuildDebug

BUILD SUCCESSFUL

Total time: 28.085 secs
Built the following apk(s): 
	/root/tabs/platforms/android/build/outputs/apk/android-debug.apk

#19

All good. This APK should work.


#20

Sadly, still white screen…
What can I try?