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.
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
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>
@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?
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
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!
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!!
