[Angular2] concurrent tsc and liteserver not working (in Quickstarts, Tour of heroes and other projects)

[Carsten H]

Hello,

Some words about me

i am familar with the playframework stack and reactive application development. For some reasons i have to include angular2 into my stack of technologies. The coding guidlines for angular2 sounds very familar to me. 

So the conclusion is right: i was not familar with the javascript/typescript ecosystem before learning angular2(and surely not even now).

But knowing scala, functional programming and the playframework, there are no hurdles for me in learning angular2. The concepts are to similar.

Only the necessary tooling conceals some obstacles in it. 

My Problem

in mostly all of the tried projects i found a line similar to the following in package.json

   "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

normally i remove the first 'tsc &&' (one typescript compilation is enough:-))

I perceive that 'npm start' should start the lite-server and the typescript compiler both in watchmode.

But i get the following:

D:\work\ANGULAR2\angular2-tour-of-heroes>npm start

> angular2-to...@0.1.0 start D:\work\ANGULAR2\angular2-tour-of-heroes

> concurrently "npm run tsc:w" "npm run lite"

[1]

[1] > angular2-to...@0.1.0 lite D:\work\ANGULAR2\angular2-tour-of-heroes

[1] > lite-server

[1]

[0]

[0] > angular2-to...@0.1.0 tsc:w D:\work\ANGULAR2\angular2-tour-of-heroes

[0] > tsc -w

[0]

[1] ** browser-sync config **

[1] { injectChanges: false,

[1]   files: [ './**/*.{html,htm,css,js}' ],

[1]   watchOptions: { ignored: 'node_modules' },

[1]   server: { baseDir: [ './' ], middleware: [ [Function], [Function] ] },

[1]   port: 8000 }

[1] events.js:160

[1]       throw er; // Unhandled 'error' event

[1]       ^

[1]

[1] Error: Error watching file for changes: UNKNOWN

[1]     at exports._errnoException (util.js:1026:11)

[1]     at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)

[1]

[1] npm

[1]  ERR! Windows_NT 6.3.9600

[1] npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lite"

[1] npm ERR! node v6.5.0

[1] npm ERR! npm  v3.10.3

[1] npm ERR! code ELIFECYCLE

[1] npm ERR!

[1]  angular2-to...@0.1.0 lite: `lite-server`

[1] npm ERR! Exit status 1

typescript and lite-server are installed as dev dependencies.

Next step:

trying to issue the commands sequencially:

npm run tsc:w

This yields the same error: Error watching file for changes: UNKNOWN

But npm run tsc succeeds

And i final npm run lite launches the application.

Now i like to understand why this error occurs and what its meaning is. Can somebody help out here??

Diving deeper into the issue:

For that i setup a tiny little project guided by the Angular2 quickstart.

This projects sufferd the same issue.

Step 1

switching  in tsconfig.json the target attribute from es5 to es6 and removing all typings, my program launched as expected (npm start).

After switching back to es5 the above error was there, again:-(

Step2

trying to issue the commands in sequence:

For this little project 'npm run tsc' and 'npm run tsc:w' succed.

But 'npm run lite' only works if there is no watching tsc compiler.

Step3

installing lite-server and typescript globally.

removing typescript and lite-server from the dev dependencys

So i am able to issue the commands from the console.

I opened (sure, Windows:-() two CMD-Windows

result:

In the first window: 'tsc -w' (which succeded) and after that in the second 'lite-server'

First Window
D:\work\ANGULAR2\playground>tsc -w

08:25:40 - Compilation complete. Watching for file changes.

Second Window

D:\work\ANGULAR2\playground>lite-server

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...

** browser-sync config **

{ injectChanges: false,

  files: [ './**/*.{html,htm,css,js}' ],

  watchOptions: { ignored: 'node_modules' },

  server: { baseDir: './', middleware: [ [Function], [Function] ] } }

events.js:160

      throw er; // Unhandled 'error' event

      ^

Error: Error watching file for changes: UNKNOWN

    at exports._errnoException (util.js:1026:11)

    at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)

Now, stopping both commands and trying the other way around:

First window

D:\work\ANGULAR2\playground>lite-server

Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...

** browser-sync config **

{ injectChanges: false,

  files: [ './**/*.{html,htm,css,js}' ],

  watchOptions: { ignored: 'node_modules' },

  server: { baseDir: './', middleware: [ [Function], [Function] ] } }

[BS] Access URLs:

 ------------------------------------

       Local: http://localhost:3000

    External: http://10.0.18.177:3000
[....]

Second Window

D:\work\ANGULAR2\playground>tsc -w

08:30:22 - Compilation complete. Watching for file changes.

events.js:160

      throw er; // Unhandled 'error' event

      ^

Error: Error watching file for changes: UNKNOWN

    at exports._errnoException (util.js:1026:11)

    at FSEvent.FSWatcher._handle.onchange (fs.js:1406:11)

D:\work\ANGULAR2\playground>

Conclusion

The problem has to do with some operating limits, as mentioned in some stackoverflow and github issues. But,

So, at the end there are some questions remaining:

1. why is this used in Examples for beginners? 
   
2. Can one explain the real issue?
3. Am i right, with the assumption of operating system limits?
4. what is the solution for running typescript compiler and lite-server parallel in watching mode?
5. Are there better alternatives for lite-server and/or typescript
6. Is there any working example out there with a functioning toolchain?

If the answer to number 6 is simply 'NO' i am willing to come up with such an example, if someone can point me to the 'right' toolchain.