Blank white screen when ionic serve on any starter

Ionic Framework ionic-v3
1

I have (since beta4) been unable to get any of the (typescript) starters working using code such as the following (for the default Tab starter)

ionic start TEST --v2 --ts

which has package.json:

 "dependencies": {
    "angular2": "2.0.0-beta.15",
    "es6-shim": "^0.35.0",
    "ionic-angular": "2.0.0-beta.6",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0-alpha.3",
    "rxjs": "5.0.0-beta.2"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.1.0",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^1.0.1",
    "run-sequence": "1.1.5"
  },

Firstly, if "ionic.config.js has been deprecated’, can the Ionic team please remove it from the starters so that we don’t get this message every time we install or do a serve, and thus need to delete it ourselves?

My setup is as follows:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 8.1
Node Version: v5.11.0

npm version is 3.8.8

After doing an ionic serve in the project directory I am only seeing this in the app.bundle.js:

(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 there is nothing between the <ion-app></ion-app> tags of the HMTL body when live-reloaded into and viewed in Chrome Developer (i.e. the app hasn’t been injected there).

I have tried deleting the node_modules folder and doing a npm install but this has not fixed the problem.

I am able to successfully serve a beta4 project with the following package.json

  "dependencies": {
    "angular2": "^2.0.0-beta.13",
    "es6-promise": "3.0.2",
    "es6-shim": "^0.35.0",
    "ionic-angular": "^2.0.0-beta.4",
    "ionic-native": "^1.1.0",
    "ionicons": "3.0.0-alpha.3",
    "moment": "^2.12.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "del": "2.2.0",
    "gulp": "3.9.1",
    "gulp-watch": "4.3.5",
    "ionic-gulp-browserify-typescript": "^1.0.1",
    "ionic-gulp-fonts-copy": "^1.0.0",
    "ionic-gulp-html-copy": "^1.0.0",
    "ionic-gulp-sass-build": "^1.0.0",
    "ionic-gulp-scripts-copy": "^1.0.0",
    "run-sequence": "^1.1.5",
    "typescript": "1.8.7"
  },

Despite this working, in both cases I always get FS and EPERM related errors such as the following when doing an ionic serve

Caught exception:
 Error: watch C:\Users\Mark\My Documents\App Development\test2\app\pages\page3\p
age3.scss EPERM
    at exports._errnoException (util.js:893:11)
    at FSWatcher.start (fs.js:1313:19)
    at Object.fs.watch (fs.js:1341:11)
    at createFsWatchInstance (C:\Users\Mark\Documents\App Development\test2\node
_modules\chokidar\lib\nodefs-handler.js:37:15)
    at setFsWatchListener (C:\Users\Mark\Documents\App Development\test2\node_mo
dules\chokidar\lib\nodefs-handler.js:80:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (C:\Users\Mark\Documents\App Dev
elopment\test2\node_modules\chokidar\lib\nodefs-handler.js:228:14)
    at FSWatcher.NodeFsHandler._handleFile (C:\Users\Mark\Documents\App Developm
ent\test2\node_modules\chokidar\lib\nodefs-handler.js:255:21)
    at FSWatcher.<anonymous> (C:\Users\Mark\Documents\App Development\test2\node
_modules\chokidar\lib\nodefs-handler.js:473:21)
    at FSReqWrap.oncomplete (fs.js:82:15)

Mind letting us know? https://github.com/driftyco/ionic-cli/issues

but i believe that it maybe a Windows (8) related issue rather than ionic2 specific (albeit I never saw such errors when using ionic1). Or it might be related to the version of graceful-fs - there is a warning with some dependency during the npm install that the version of graceful-fs is deprecated and that ^4.0.0 should be used. I tried installing ^4.0.0 as a dev dependency in my project but that did not fix the FS watcher problems.

Anyway any advice would be appreciated as I’m stuck using my working beta4 project setup at the moment.

EDIT: The following issue is in regards to the deprecated graceful-fs version used by Ionic dependencies:

2

@Mobius77 I’m not able to reproduce this, creating a new project works just fine:

ionic start Test --v2 --ts
cd Test
ionic serve

Maybe it’s something environment-related, here’s my current setup:

Cordova CLI: 6.1.1
Gulp version:  CLI version 1.2.1
Gulp local:   Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
OS: Windows 8.1
Node Version: v5.8.0

Not sure if you’ve seen this, but I’ll recommend you the following topic for upgrading to beta.6:

3

@iignatov Thanks but I did a complete environment uninstall then reinstall (i.e. uninstall all global packages, uninstalled Node, reinstalled Node 5.8.0 which is the same as yours, installed latest ionic CLI) and this did not fix the problem when serving an ionic2 starter. My feeling is that the FS watcher issues I am experiencing are more prevalent with the angular2 or ionic-angular version update (more files to watch than can be handled?) and so during the gulp build the app.html/ts is not being read and hence not being copied to the bundle.

Alternatively, the EPERM error I am getting with the Watch relates to file permissions - I have uninstalled or turned off all software that may be locking the files from having permission to read/delete/rename or whatever the gulp-watch or other devDependency processes (e.g. del, ionic-gulp-browserify-typescript) are doing which may be causing a read conflict. I downgraded ionic-gulp-browserify-typescript to 1.0.1 (vs 1.1.0) in the starter and this did not fix the problem. I have admin rights to the computer/files.

I don’t want to update my working beta4 project (i.e. I can successfully ionic serve it despite similar Watch and EPERM issues) to beta6 because if the beta6 starters don’t work for me then an upgrade to beta6 being successful is unlikely. And with the beta4 set-up at least I can compare and maybe isolate the problem (ionic-angular version vs angular2 version vs browserify vs gulpfile.js etc).

So I will keep trying to uncover the issue but since it is evident we have the same OS, installed versions and I am apparently the only person in the world with this problem it is extremely frustrating to say the least!

Cheers

4

@Mobius77 Thanks for the detailed reply! I agree that NodeJS development on Windows is no joy. And the initial environment setup sometimes might be way too complicated (I’m not sure if this is still the case though).

When it’s still not working after a complete reinstall of Node and everything related, I’m not sure if I could help you further. Maybe you could try to run the Node.js command prompt as Administrator to see if it’ll help with the permission errors. It’s not a good practice but I saw it mentioned in many Windows-related issues.

It seems that there’s already an open issue for something similar:

UPDATE: I managed to successfully start and serve a new project on Windows 7 without performing the complicated initial setup, i.e. it’s seems that maybe it’s not needed anymore.

5

@iignatov Thanks anyway. :slight_smile: I just spent a few hours more trying to resolve this with no success, argh! If I change the ‘watch’ in the following gulp task (in gulpfile.js) to ‘build’

gulp.task('serve:before', ['watch']);

thus bypassing all the watching (and those errors) I still get an app.bundle.js with the same content as my first post (i.e. without the actual app.ts/js code included). The app.bundle.js.map file does include the app.ts/js code though, so that’s confusing.

So it may be related to the code in the gulp tasks

var buildBrowserify = require('ionic-gulp-browserify-typescript');
var copyScripts = require('ionic-gulp-scripts-copy');

which I believe are responsible for creating app.bundle.js.

But that’s enough for me for today, will have a look at these tasks further if I still have the enthusiasm in the next few days…

6

@Mobius77 Have you tried to run Node.js command prompt as Administrator? Isn’t your beta.4 project also using Gulp/Browserify process? If it’s working with your beta.4 project but it’s not working with a new beta.6 project I would recommend you to compare/diff the two folders and see what’s the difference.

7

@iignatov Thanks for reiterating whether I am running things as Administrator…that was the solution! I assumed that since I am a single user with Admin rights to my computer that I would automatically be running the command prompts as Administrator. Turns out this is not the case.

By right-clicking on Windows Command Prompt (on Windows 8.1), selecting ‘Run as Administrator’, and navigating to my project folder and running ionic serve, I was able to run both my beta4 project and the beta6 starter flawlessly (i.e. without any errors whatsoever) - yay! :smile:

I usually use the Node.js command prompt - how do I ensure I’m running that as Administrator? When I right-click on it there is no option to run as Administrator…

Thanks again!

1 Like
8

@Mobius77 I’m glad you got it working!

I’m not sure why the Run as administrator option is missing for Node.js command prompt.

In this case you could configure it to always execute with administrator privileges. To achieve this, locate its shortcut then right click and select Properties and then on the Shortcut tab there’s a button Advanced... - click it, mark the Run as administrator checkbox and click the OK button (twice) to apply the changes. Then it should automatically be run as administrator every time you open it.

9

@iignatov My NodeJS command prompt is in the Taskbar and I now see the Run as Administrator option when right-clicking the icon on the Taskbar, and then also right-clicking the Node.js command prompt’ entry.

Thanks for the instructions for setting it to Run as Administrator by default.

Cheers