Blank white screen on running ionic cordova app on a windows 10 device


#1

Current behavior:

I have deployed an ionic app to a windows 10 surface pro using visual studio 2017 build option. On starting the app, a blank white screen shows up and the app is stuck without proceeding further.
Expected behavior:

I would expect the app to start normally as its happening without any issues in other platforms. have deployed the same app on Android device ( Android phone and tablet ) and Apple device ( IPAD )
Steps to reproduce:

Did a git clone of my repository on the actual device where I have installed the app.
Installed all dependencies ( node, npm install, visual studio 2017 installed )
Ionic Cordova add platform windows
Then launch Visual studio 2017 to open the .vs2013.sln file, create app package and run the Add-AppDevPackage in windows PowerShell to install the app on the device.
Try to run the app. The app gets stuck at this point. If I try to serve it locally on the windows device, it works fine. However, the actual app doesn’t run as expected.
Could you please provide some pointers to help fix this issue as we have chosen the Ionic framework for a POC and have to demo the use of this framework on all platforms. Its working fine on Android and IOS devices.

Ionic info

@ionic/cli-utils : 1.14.0
ionic ( Ionic CLI ) : 3.14.0

global packages:
cordova ( Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platform : windows 5.0.0
Ionic Framework : ionic-angular 3.6.1

System:

Node: v6.11.4
npm: 3.10.10
OS: Windows 10

Misc:

backend:pro

#2

Can you build a newly create project with ionic start?


#3

Hi, tried a ionic tabs template. Get an exception when I try to add windows platform.


#4

Ok update. Did a fresh start with ionic tabs template. Added platform windows. At this point, when I try to build with ionic Cordova build windows – --arch=“x86” I get an error that SDK Microsoft.WinJS.2.0, version=1.0 was not found :frowning:

Complete log till now:

Microsoft Windows [Version 10.0.15063]
(c) 2017 Microsoft Corporation. All rights reserved.

C:\Users\Test1MobileMentor>ionic start MyApp tabs
√ Creating directory .\MyApp - done!
Fetching app base (https://github.com/ionic-team/ionic2-app-base/archive/master.tar.gz)
√ Downloading - done!
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!
Installing dependencies may take several minutes!
> npm i
√ Running command - done!

C:\Users\Test1MobileMentor>npm install -g cordova ionic
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
C:\Users\Test1MobileMentor\AppData\Roaming\npm\cordova -> C:\Users\Test1MobileMentor\AppData\Roaming\npm\node_modules\cordova\bin\cordova
C:\Users\Test1MobileMentor\AppData\Roaming\npm\ionic -> C:\Users\Test1MobileMentor\AppData\Roaming\npm\node_modules\ionic\bin\ionic
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\ionic\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ cordova@7.1.0
+ ionic@3.15.1
added 115 packages and updated 367 packages in 44.37s

C:\Users\Test1MobileMentor>cd MyApp

C:\Users\Test1MobileMentor\MyApp>ionic cordova platform add windows
Enabling Cordova integration.
> ionic config set integrations.cordova {} --json --force
[OK] integrations.cordova set to {} in .\ionic.config.json!
> cordova platform add windows --save
Using cordova-fetch for cordova-windows@~5.0.0

Adding windows project...

Creating Cordova Windows Project:
        Path: platforms\windows
        Namespace: io.ionic.starter
        Name: MyApp
Windows project created with cordova-windows@5.0.0

Discovered plugin "ionic-plugin-keyboard" in config.xml. Adding it to the project

Installing "ionic-plugin-keyboard" for windows

Adding ionic-plugin-keyboard to package.json

Saved plugin info for "ionic-plugin-keyboard" to config.xml

Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project

Installing "cordova-plugin-whitelist" for windows
Adding cordova-plugin-whitelist to package.json
Saved plugin info for "cordova-plugin-whitelist" to config.xml

Discovered plugin "cordova-plugin-device" in config.xml. Adding it to the project

Installing "cordova-plugin-device" for windows
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 windows
Adding cordova-plugin-splashscreen to package.json
Saved plugin info for "cordova-plugin-splashscreen" to config.xml

Discovered plugin "cordova-plugin-ionic-webview" in config.xml. Adding it to the project

Installing "cordova-plugin-ionic-webview" for windows

Adding cordova-plugin-ionic-webview to package.json

Saved plugin info for "cordova-plugin-ionic-webview" to config.xml

--save flag or autosave detected

Saving windows@~5.0.0 into config.xml file ...


C:\Users\Test1MobileMentor\MyApp>npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 114 packages in 6.337s

C:\Users\Test1MobileMentor\MyApp>ionic cordova build windows
Running app-scripts build: --platform windows --target cordova
[00:57:15]  build dev started ...
[00:57:15]  clean started ...
[00:57:15]  clean finished in 4 ms
[00:57:15]  copy started ...
[00:57:15]  deeplinks started ...
[00:57:15]  deeplinks finished in 20 ms
[00:57:15]  transpile started ...
[00:57:18]  transpile finished in 3.23 s
[00:57:18]  preprocess started ...
[00:57:18]  preprocess finished in less than 1 ms
[00:57:18]  webpack started ...
[00:57:18]  copy finished in 3.41 s
[00:57:25]  webpack finished in 6.53 s
[00:57:25]  sass started ...
[00:57:26]  sass finished in 816 ms
[00:57:26]  postprocess started ...
[00:57:26]  postprocess finished in 8 ms
[00:57:26]  lint started ...
[00:57:26]  build dev finished in 10.81 s
> cordova build windows
Building project: C:\Users\Test1MobileMentor\MyApp\platforms\windows\CordovaApp.Windows.jsproj

        Configuration : debug
        Platform      : anycpu
  Patching 8.1 in prebuild event...
  Injected base.js reference to the www/index.html
  Removing /( *)(<script\s+(?:type="text\/javascript"\s+)?src="\/www\/WinJS\/js\/base.js">\s*<\/script>)(\s*)/ from www/index.html
  Removing /( *)(<script\s+(?:type="text\/javascript"\s+)?src="\/\/Microsoft.Phone.WinJS.2.1\/js\/base.js">\s*<\/script>)(\s*)/ from www/index.html
C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Common.CurrentVersion.targets(2049,5): error MSB3774: Could not find SDK "Microsoft.WinJS.2.0, Version=1.0". [C:\Users\Test1MobileMentor\MyApp\platforms\windows\CordovaApp.Windows.jsproj]
[00:57:29]  lint finished in 2.91 s
Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe: Command failed with exit code 1
[ERROR] An error occurred while running cordova build windows (exit code 1).


C:\Users\Test1MobileMentor\MyApp>ionic cordova build windows -- --arch="x86"
Running app-scripts build: --platform windows --target cordova
[01:03:02]  build dev started ...
[01:03:02]  clean started ...
[01:03:02]  clean finished in 17 ms
[01:03:02]  copy started ...
[01:03:02]  deeplinks started ...
[01:03:02]  deeplinks finished in 28 ms
[01:03:02]  transpile started ...
[01:03:06]  transpile finished in 4.03 s
[01:03:06]  preprocess started ...
[01:03:06]  preprocess finished in less than 1 ms
[01:03:06]  webpack started ...
[01:03:06]  copy finished in 4.23 s
[01:03:13]  webpack finished in 7.21 s
[01:03:13]  sass started ...
[01:03:15]  sass finished in 1.18 s
[01:03:15]  postprocess started ...
[01:03:15]  postprocess finished in 8 ms
[01:03:15]  lint started ...
[01:03:15]  build dev finished in 12.68 s
> cordova build windows --arch=x86
Building project: C:\Users\Test1MobileMentor\MyApp\platforms\windows\CordovaApp.Windows.jsproj

        Configuration : debug
        Platform      : x86
  Patching 8.1 in prebuild event...
  Injected base.js reference to the www/index.html
  Removing /( *)(<script\s+(?:type="text\/javascript"\s+)?src="\/www\/WinJS\/js\/base.js">\s*<\/script>)(\s*)/ from www/index.html
  Removing /( *)(<script\s+(?:type="text\/javascript"\s+)?src="\/\/Microsoft.Phone.WinJS.2.1\/js\/base.js">\s*<\/script>)(\s*)/ from www/index.html
C:\Program Files (x86)\MSBuild\14.0\bin\Microsoft.Common.CurrentVersion.targets(2049,5): error MSB3774: Could not find SDK "Microsoft.WinJS.2.0, Version=1.0". [C:\Users\Test1MobileMentor\MyApp\platforms\windows\CordovaApp.Windows.jsproj]
Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe: Command failed with exit code 1

[ERROR] An error occurred while running cordova build windows --arch=x86 (exit code 1).

[01:03:18]  lint finished in 3.79 s

C:\Users\Test1MobileMentor\MyApp>

#5

@Sujan12 Solved this by adding windows-target-version value = 10.0 in config.xml

But now got another error : Apppackages doesn’t exists

Wanted to confirm one thing, can’t we build apppackages from cli? Do I need to generate it from visual studio every time for a windows app?


#6

@Sujan12 : I resolved the above issue as well. I had to set VSINSTALLDIR=C:/Program Files (x86)/Microsoft Visual Studio/2017/Community and then run Cordova build windows – --arch=“x86” which results in successful build and run as well. So basic ionic tabs starter template is working! Now if I come back to my original issue, I guess my blank white screen should be related to Cordova-sqlite-storage plugin which I’m using in my actual app and which is not part of the ionic tabs starter template. Any pointers on this?


#7

Ok, your configuration problems could probably be figure out with ionic cordova requirements - can you run that now and see if that is happy?

Does that plugin support windows as a platform?


#8

Hi, when I run my Cordova requirements, I see that I should be using visual studio 2015 community. But I’m currently using 2017. Should that affect in anyway?

Also, I made another observation. I see in the folder for my ionic starter template, there is an index.html file generated under platforms\windows\www folder. But in my app, index.html is missing in www folder when I do a build. So, would this be causing the blank screen as its not finding the index.html? I tried copying the index.html file from src folder into www folder. But that didn’t work as well :unamused:


#9

I don’t remember how the Visual Studio 2015/2017 situation was…


#10

So what do you suggest?? Any pointers??


Blank/White screen when running starter on windows 10 (ionic 2.0.0-beta.3 typescript)
#11

Try installing VS2015 and see if this fixes things.
Search the forum for previous discussion about this.


#12

Actually my app uses Cordova-sqlite-storage version 2.0.4 which is supported in VS2017. Hence using VS2017


#13

Then best ask at issues.cordova.io how you can run the windows platform with VS2017.
(Or maybe try to install both first, see if that works)


#14

Ok i ll have a look there too… Any idea about index.html not getting generated under www folder on build?


#15

See the last error message screenshot oyu posted. That is working on index.html, probably gets lost because the process fails.


#16

That is of the ionic tabs starter template app which works fine with index.html under www folder. Something’s amiss here in my app folder which is what I’m trying to figure out!:neutral_face:


#17

You get an index.html with ionic serve, ionic build and ionic cordova build android?


#18

I will do a fresh build and let u know at what point it gets generated.


#19

Hurraayyy!!! I got it to work! :tada:

I found out what I was doing wrong!

I wanted to observe exactly when index.html gets generated. So did a fresh build again and found that when we add platform, index.html gets generated under platforms\windows\www folder.

What i did before was to just use cordova platform add windows which was resulting in index.html not getting generated in the required structure / folder. So, this time tried using ionic cordova platform add windows which gave the correct structure. And followed it with ionic cordova run windows – --arch=“x86”. It worked perfectly fine!!