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
So you say this is an unchanged “tabs” template?
Post your ionic info output please.
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
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.
Thanks for reply, I try with node 6.11 on Linux now, I’ll let you know
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?
No.
How exactly do you create the project and then build the app?
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
How come there are more platforms then?
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
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.
I try this too, I’m trying everything…
Is there a config.xml file?
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>
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?
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
Now run ionic serve, then ionic cordova platform add android and then ionic cordova build android --verbose.
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
All good. This APK should work.
Sadly, still white screen…
What can I try?