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


#1

I get a blank screen when I start a fresh project using typescript and the latest ionic beta, on windows 10. I am including as clear a repro below as I could find… any help much appreciated!

Questions/Notes:

  1. I understand there have been breaking changes but I assume the way I am creating the project fresh those should already be included?
  2. Any ideas on how to debug why there is a blank screen in this case? I saw some chatter online that people got blank screens with ionic 2 apps on windows due to invalid javascript, but I am using the starter with no modifications… is there invalid javascript in the starter?
  3. I started off below with an “ionic info”. Note that my ionic app lib is showing as older than my ionic cli. How can I update the app lib?
  4. Ionic info below states my OS version is Windows 8.1. Actually I’m running Windows 10.
  5. Towards the end of the log below there is an error in angular2 facade (Cannot re-export name that is not defined in the module). Even if I fix that by upgrading to angular2 beta7+ as discussed here https://github.com/angular/angular/issues/6468, I still get the blank screen (so to simplify the repro I didn’t include that step in the log below).

*** start log

C:\Users\tjaff\Documents\GitHub> ionic info

Your system information:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS: Windows 8.1
Node Version: v0.12.2

C:\Users\tjaff\Documents\GitHub> ionic start testapp --v2 --ts

One awesome Ionic app coming right up…

Downloading: https://github.com/driftyco/ionic2-app-base/archive/typescript.zip
[=============================] 100% 0.0s
Downloading: https://github.com/driftyco/ionic2-starter-tabs/archive/typescript.zip
Installing Node Modules

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

Make sure to cd into your new app directory:
cd testapp

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

To run on iOS:
ionic run ios

To run on Android:
ionic run android

To test your app on a device easily, try Ionic View:
http://view.ionic.io

New! Add push notifications, update your app remotely, and package iOS and Android apps with the Ionic Platform!
https://apps.ionic.io/signup

New to Ionic? Get started here: http://ionicframework.com/docs/v2/getting-started

C:\Users\tjaff\Documents\GitHub> cd .\testapp
C:\Users\tjaff\Documents\GitHub\testapp> npm install
npm WARN package.json testapp@ No repository field.
npm WARN package.json testapp@ No README data
npm WARN package.json strip-sourcemap-loader@0.0.1 No repository field.
C:\Users\tjaff\Documents\GitHub\testapp> ionic run windows
• You’re trying to build for windows, but don’t have the platform installed yet.
∆ Installing windows for you.
√ Installed platform windows
Installing cordova-plugin-device
Installing cordova-plugin-console
Installing cordova-plugin-whitelist
Installing cordova-plugin-splashscreen
Installing cordova-plugin-statusbar
Installing ionic-plugin-keyboard

∆ Compiling Sass to CSS
√ Matching patterns: app/theme/app.+(ios|md|wp).scss

∆ Copying fonts
√ Matching patterns: node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)

∆ Copying HTML
√ Matching patterns: app/**/*.html

∆ Compiling and bundling with Webpack…
√ Using your webpack.config.js file
√ HTML copied to www/build
√ Sass compilation complete
√ Fonts copied to www/build/fonts
√ Compiling files complete.

Hash: 0eb9561a1b31606fd62d
Version: webpack 1.12.11
Time: 8830ms
Asset Size Chunks Chunk Names
app.bundle.js 2.73 MB 0 [emitted] main
[0] multi main 64 bytes {0} [built]
+ 365 hidden modules

ERROR in [default] C:/Users/tjaff/Documents/GitHub/testapp/node_modules/angular2/src/facade/promise.d.ts:1:9
Cannot re-export name that is not defined in the module.

√ Webpack complete

Running command: “C:\Program Files (x86)\nodejs\node.exe” C:\Users\tjaff\Docum
ents\GitHub\testapp\hooks\after_prepare\010_add_platform_class.js C:\Users\tjaff\Documents\GitHub\testapp
add to body class: platform-windows
Building project: C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\CordovaApp.Windows.jsproj
Configuration : debug
Platform : anycpu
CordovaApp.Windows -> C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\AppPackages\CordovaApp.Windows_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows_0.0.1.0_anycpu_debug.appx
CordovaApp.Windows -> C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\AppPackages\CordovaApp.Windows_0.0.1.0_anycpu_debug.appxupload
Your package has been successfully created.
Building project: C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\CordovaApp.Phone.jsproj
Configuration : debug
Platform : anycpu
CordovaApp.Phone -> C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\AppPackages\CordovaApp.Phone_0.0.1.0_anycpu_debug_Test\CordovaApp.Phone_0.0.1.0_anycpu_debug.appx
CordovaApp.Phone -> C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\AppPackages\CordovaApp.Phone_0.0.1.0_anycpu_debug.appxupload
Your package has been successfully created.
Deploying windows package to device:
C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\AppPackages\CordovaApp.Windows_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows_0.0.1.0_anycpu_debug.appx
Attempting to uninstall previous application version…
Attempting to install application…
Found package: C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\AppPackages\CordovaApp.Windows_0.0.1.0_anycpu_debug_Test\CordovaApp.Windows_0.0.1.0_anycpu_debug.appx

Installing app…
Found dependency package(s):
C:\Users\tjaff\Documents\GitHub\testapp\platforms\windows\AppPackages\CordovaApp.Windows_0.0.1.0_anycpu_debug_Test\Dependencies\Microsoft.WinJS.2.0.appx

Success: Your app was successfully installed.
Starting application…
ActivateApplication: io.ionic.starter_h35559jr9hy9m!io.ionic.starter
C:\Users\tjaff\Documents\GitHub\testapp>


Blank screen on Windows 10
#2

For what it’s worth, if I clone the ionic-conference-app, and do an ionic run windows… same issue. Blank screen. Tried it on both master (javascript) and typescript branches.


#3

Solved! In case this is helpful to others, you need to do “gulp build”. Then everything works. Run “npm install” to get gulp, ofcourse.


#4

for me it’s working on windows 10 and i can see the ionic-conference-app is working fine in Windows 10 emulator but when i am trying to deploy into windows 8.1 emulator then it shows white black screen.

is it working for you in windows 8.1 ??

i am getting below error in woindows 8.1

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.



#5

When you say solved, do you mean only for the conference app or for starters in general?
Are you able to start a tabs app?
ionic start test tabs --v2 --ts

gulp build does not do the trick for me.
For reference, here is my post:


#6

Hello @tjaffri,

I’m facing a similar issue (Blank / white screen ) when I try to run my app on a windows10 device.

Reported my issue in the ionic forum https://github.com/ionic-team/ionic/issues/13231#issuecomment-339292340 and was told to look up here for help.

Could you share some info on gulp build.

Thanks!


#7

Probably better to start a new thread rather than reviving a 2 year old one for which the problem is likely some completely different problem.


#8

Thanks! Yup, started a new one here : Blank white screen on running ionic cordova app on a windows 10 device