Ionic serve producing white screen (with no errors)

Ionic Framework ionic-v3
1

I have installed Ionic2 today and tried several starter projects. Each time ionic serve gives a blank (white) browser screen with no console errors.

app.bundle.js is truncated:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require==“function”&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error(“Cannot find module '”+o+“'”);throw f.code=“MODULE_NOT_FOUND”,f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require==“function”&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

},{}],2:[function(require,module,exports){
arguments[4][1][0].apply(exports,arguments)
},{“dup”:1}]},{},[1,2])

//# sourceMappingURL=app.bundle.js.map

And app.bundle.js.map indicated errors (first part as follows):

{“version”:3,“sources”:[“…/…/…/…/Documents/Apps/ionic2/testapp/node_modules/browser-pack/_prelude.js”,“app/app.ts”],“names”:,“mappings”:“AAAA;ACAA”,“file”:“app.bundle.js”,“sourceRoot”:“…/…/…/”,“sourcesContent”:["(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module ‘"+o+"’");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];

There are several other threads relating to ‘white screens’ but no solution found so far.

Ionic info:

Cordova CLI: 6.3.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.10
Ionic CLI Version: 2.0.0-beta.35
Ionic App Lib Version: 2.0.0-beta.19
OS: Windows 7 SP1
Node Version: v5.12.0

Solutions tried to date:

  • uninstall/reinstall ionic2 and cordova
  • reinstall node.js
  • am running command prompt as administrator

Note: ionic serve working for older ionic1 projects.

Thanks for any insights.

John

2

Ok found the solution for anyone else who comes across this problem.

On speculation I moved my App folder further up the directory tree (thinking it might be a path length issue for the node_module files. With my App folder now running c:\Apps apps are compiling and showing in the browser.

3

I’m encountering something that might or might not be related:

  1. ionic start myapp --v2 --ts
  2. ionic serve
    will result in a white screen. Screenshot here: http://imgur.com/a/C8jP4

A bit of a background: this particular machine/laptop is running windows 10, with a VSUBST drive Z: pointing to “c:\dev\java\projects\2016”. I have everything on the latest version, (including ionic cli , cordova, npm).

I was gonna chalk it up to just the usual beta hiccup, but thanks to @Day41’s posts, i tried moving the whole folder to the root C:/ drive and ‘ionic serve’ works. After trying multiple paths and drives (usb sticks, ramdisk, etc) i found that ‘ionic serve’ doesn’t work ONLY on the subst-ed Z:\ drive.

TLDR: “vsubst” or “subst” on windows breaks ionic serve. This is a regression from ionic 1.x and earlier betas (up until around beta 13, i think).
Any thoughts?

Thanks.

PS: @Day41: npm 3.x now use the ‘flat’ structure , so the long node_modules nested paths shouldn’t be a problem anymore.

4

Thanks truesaint.

Interesting about npm 3x. Didn’t help my issue.

Happy to be up and running Ionic2.