angular typescript browser-sync lite-server node8.4

Angular Quickstart: Error: spawn EACCES

I cloned Angular quickstart. then I ran npm install, and then npm start. This is what I got.

$ npm start

> angular-quickstart@1.0.0 prestart /home/ecarroll/code/angular/quickstart
> npm run build


> angular-quickstart@1.0.0 build /home/ecarroll/code/angular/quickstart
> tsc -p src/


> angular-quickstart@1.0.0 start /home/ecarroll/code/angular/quickstart
> concurrently "npm run build:watch" "npm run serve"

[1] 
[1] > angular-quickstart@1.0.0 serve /home/ecarroll/code/angular/quickstart
[1] > lite-server -c=bs-config.json
[1] 
[0] 
[0] > angular-quickstart@1.0.0 build:watch /home/ecarroll/code/angular/quickstart
[0] > tsc -p src/ -w
[0] 
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server: 
[1]    { baseDir: 'src',
[1]      middleware: [ [Function], [Function] ],
[1]      routes: { '/node_modules': 'node_modules' } } }
[1] [Browsersync] Access URLs:
[1]  --------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.2.159:3000
[1]  --------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.2.159:3001
[1]  --------------------------------------
[1] [Browsersync] Serving files from: src
[1] internal/child_process.js:325
[1]     throw errnoException(err, 'spawn');
[1]     ^
[1] 
[1] Error: spawn EACCES
[1]     at _errnoException (util.js:1041:11)
[1]     at ChildProcess.spawn (internal/child_process.js:325:11)
[1]     at Object.exports.spawn (child_process.js:493:9)
[1]     at module.exports (/home/ecarroll/code/angular/quickstart/node_modules/opn/index.js:75:24)
[1]     at Object.open (/home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/utils.js:186:9)
[1]     at Object.openBrowser (/home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/utils.js:165:23)
[1]     at EventEmitter.service:running (/home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/internal-events.js:42:23)
[1]     at emitOne (events.js:120:20)
[1]     at EventEmitter.emit (events.js:210:7)
[1]     at /home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/browser-sync.js:260:19
[1] npm
[1]  ERR! code ELIFECYCLE
[1] npm ERR!
[1]  errno 1
[1] npm
[1]  ERR! angular-quickstart@1.0.0 serve: `lite-server -c=bs-config.json`
[1] npm ERR! Exit status 1
[1] npm ERR! 
[1] npm
[1]  ERR! Failed at the angular-quickstart@1.0.0 serve script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1] 
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR!     /home/ecarroll/.npm/_logs/2017-09-05T19_38_23_635Z-debug.log
[1] npm run serve exited with code 1
[0] 14:38:25 - Compilation complete. Watching for file changes.

contents of /home/ecarroll/.npm/_logs/2017-09-05T19_38_23_635Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'serve' ]
2 info using npm@5.4.0
3 info using node@v8.4.0
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle angular-quickstart@1.0.0~preserve: angular-quickstart@1.0.0
6 info lifecycle angular-quickstart@1.0.0~serve: angular-quickstart@1.0.0
7 verbose lifecycle angular-quickstart@1.0.0~serve: unsafe-perm in lifecycle true
8 verbose lifecycle angular-quickstart@1.0.0~serve: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/ecarroll/code/angular/quickstart/node_modules/.bin:/usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/ecarroll/code/angular/quickstart/node_modules/.bin:/home/ecarroll/.config/composer/vendor/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/ecarroll/.fzf/bin
9 verbose lifecycle angular-quickstart@1.0.0~serve: CWD: /home/ecarroll/code/angular/quickstart
10 silly lifecycle angular-quickstart@1.0.0~serve: Args: [ '-c', 'lite-server -c=bs-config.json' ]
11 silly lifecycle angular-quickstart@1.0.0~serve: Returned: code: 1  signal: null
12 info lifecycle angular-quickstart@1.0.0~serve: Failed to exec serve script
13 verbose stack Error: angular-quickstart@1.0.0 serve: `lite-server -c=bs-config.json`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:280:16)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at EventEmitter.emit (events.js:213:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:125:13)
13 verbose stack     at ChildProcess.emit (events.js:213:7)
13 verbose stack     at maybeClose (internal/child_process.js:927:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
14 verbose pkgid angular-quickstart@1.0.0
15 verbose cwd /home/ecarroll/code/angular/quickstart
16 verbose Linux 4.10.0-33-generic
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "serve"
18 verbose node v8.4.0
19 verbose npm  v5.4.0
20 error code ELIFECYCLE
21 error errno 1
22 error angular-quickstart@1.0.0 serve: `lite-server -c=bs-config.json`
22 error Exit status 1
23 error Failed at the angular-quickstart@1.0.0 serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Versions,

node --version
v8.4.0

npm --version
5.4.0

tsc --version
Version 2.5.2

If I try to exec lite-server manually, it's also failing

node ./node_modules/lite-server/bin/lite-server -c bs-config.json 
** browser-sync config **
{ injectChanges: false,
  files: [ './**/*.{html,htm,css,js}' ],
  watchOptions: { ignored: 'node_modules' },
  server: 
   { baseDir: 'src',
     middleware: [ [Function], [Function] ],
     routes: { '/node_modules': 'node_modules' } } }
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.2.159:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.2.159:3001
 --------------------------------------
[Browsersync] Serving files from: src
internal/child_process.js:325
    throw errnoException(err, 'spawn');
    ^

Error: spawn EACCES
    at _errnoException (util.js:1041:11)
    at ChildProcess.spawn (internal/child_process.js:325:11)
    at Object.exports.spawn (child_process.js:493:9)
    at module.exports (/home/ecarroll/code/angular/quickstart/node_modules/opn/index.js:75:24)
    at Object.open (/home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/utils.js:186:9)
    at Object.openBrowser (/home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/utils.js:165:23)
    at EventEmitter.service:running (/home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/internal-events.js:42:23)
    at emitOne (events.js:120:20)
    at EventEmitter.emit (events.js:210:7)
    at /home/ecarroll/code/angular/quickstart/node_modules/browser-sync/lib/browser-sync.js:260:19

Solution

Easy and best solution

Update npm so the problem doesn't happen again sudo npm update -g npm
Run this from the directory of the angular project.
```
find ./node_modules/ -type f -name xdg-open -exec chmod a+x {} \;
```
This gives xdg-open +x which permits npm start to open the browser to the applications url without throwing an exception.

Disable Opening the browser

Based on the suggestion in the comments by Tyler Christian, and similar to this answer, there is a file called bs-config.json

Change it from this,

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

by adding the open parameter to this,

{
  "open": false,
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

I will investigate now as to why this cryptic error is generated, and what the underlying problem is.

The bug, identified

And, here is the problem -- it's in the package opn. Thanks goes out to me for explaining how this error prone process works on March 14, 2017. Evan Carroll rocks.

Patch created and submitted (update patch rejected)