"ionic serve" command does not work in Windows environment

[jsonMartin]

Description:
I am having an error running the simple command of ionic serve natively in Windows. However, ionic cordova build android works fine in the same shell. This is the error that running ionic serve in cmd.exe gives:

ionic serve
> ng run app:serve --host=0.0.0.0 --port=8100
[ng] 'sh' is not recognized as an internal or external command,
[ng] operable program or batch file.

However, running ng run app:serve --host=0.0.0.0 --port=8100 directly works just fine...

The ionic serve command also works properly in Linux through WSL, however, the problem with that approach is that node-sass has to be recompiled with Linux bindings to do this.

Steps to Reproduce:

• Start a new project with ionic start via cmd.exe in Windows (with all pre-requisites already successfully installed and configured)
• Try to serve up the App with ionic serve
• Note the error

Output:
Below is the more detailed error log running ionic serve --verbose. As can be seen in the log, windows: true is set. However, for some reason, ionic-cli is still trying to execute sh commands in a windows environment?

ionic serve --verbose
  ionic:lib Terminal info: { tty: true, ci: false, windows: true } +0ms
  ionic:lib CLI global options: { _: [ 'serve' ], help: null, h: null, verbose: true, quiet: null, interactive: true, color: true, confirm: null, json: null, project: null, '--': [] } +9ms
  ionic:lib:project Project type from config: @ionic/angular (angular) +0ms
  ionic:lib:project Project details: { configPath: 'C:\\Users\\json\\Projects\\test\\ionic.config.json', errors: [], context: 'app', type: 'angular' } +2ms
  ionic Context: { binPath: 'C:\\Users\\json\\AppData\\Roaming\\npm\\node_modules\\ionic\\bin\\ionic', libPath: 'C:\\Users\\json\\AppData\\Roaming\\npm\\node_modules\\ionic', execPath: 'C:\\Users\\json\\Projects\\test', version: '4.10.2' } +0ms
  ionic:lib:telemetry Sending telemetry for command: 'ionic serve' [ '--verbose', '--interactive', '--color' ] +0ms
  ionic:lib:hooks Looking for ionic:serve:before npm script. +0ms
  ionic:utils-network checking for open port on 0.0.0.0:8100 +0ms
  ionic:utils-network checking for open port on fe80::6187:39a0:932:443b:8100 +12ms
  ionic:utils-network checking for open port on 169.254.68.59:8100 +2ms
  ionic:utils-network checking for open port on fe80::2174:5154:8963:7486:8100 +2ms
  ionic:utils-network checking for open port on 192.168.0.30:8100 +4ms
  ionic:utils-network checking for open port on ::1:8100 +2ms
  ionic:utils-network checking for open port on 127.0.0.1:8100 +1ms
  ionic:lib:serve Looking for ionic:serve npm script. +0ms
> ng run app:serve --host=0.0.0.0 --port=8100
[ng] 'sh' is not recognized as an internal or external command,
[ng] operable program or batch file.
  ionic:lib:serve received unexpected close for ng (code: 1) +64ms

[ERROR] ng has unexpectedly closed (exit code 1).

        The Ionic CLI will exit. Please check any output above for error details.
  ionic:cli-framework:utils:process onBeforeExit handler: process.exit received +0ms
  ionic:cli-framework:utils:process onBeforeExit handler: running 1 functions +1ms
  ionic:cli-framework:utils:process error while killing process tree for 14276: { Error: Command failed: taskkill /pid 14276 /T /F
  ionic:cli-framework:utils:process ERROR: The process "14276" not found.
  ionic:cli-framework:utils:process
  ionic:cli-framework:utils:process     at ChildProcess.exithandler (child_process.js:297:12)
  ionic:cli-framework:utils:process     at ChildProcess.emit (events.js:197:13)
  ionic:cli-framework:utils:process     at maybeClose (internal/child_process.js:978:16)
  ionic:cli-framework:utils:process     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
  ionic:cli-framework:utils:process   killed: false,
  ionic:cli-framework:utils:process   code: 128,
  ionic:cli-framework:utils:process   signal: null,
  ionic:cli-framework:utils:process   cmd: 'taskkill /pid 14276 /T /F' } +93ms
  ionic:cli-framework:utils:process onBeforeExit handler: error from function: { Error: Command failed: taskkill /pid 14276 /T /F
  ionic:cli-framework:utils:process ERROR: The process "14276" not found.
  ionic:cli-framework:utils:process
  ionic:cli-framework:utils:process     at ChildProcess.exithandler (child_process.js:297:12)
  ionic:cli-framework:utils:process     at ChildProcess.emit (events.js:197:13)
  ionic:cli-framework:utils:process     at maybeClose (internal/child_process.js:978:16)
  ionic:cli-framework:utils:process     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
  ionic:cli-framework:utils:process   killed: false,
  ionic:cli-framework:utils:process   code: 128,
  ionic:cli-framework:utils:process   signal: null,
  ionic:cli-framework:utils:process   cmd: 'taskkill /pid 14276 /T /F' } +4ms
  ionic:cli-framework:utils:process onBeforeExit handler: exiting (exit code 1) +2ms

My ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (C:\Users\json\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 4 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\json\AppData\Local\Android\Sdk)
   NodeJS            : v11.9.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.5.0
   OS                : Windows 10

[marckassay]

Any further conclusions? I'm experiencing, I believe the same issue.

[imhoffd]

What is the output of ng serve? (try npx ng serve if ng is not found)

[marckassay]

E:\demos\demo2 [cordova-angular-sidemenu +1 ~5 -1 !]> ng serve
ng : The term 'ng' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ ng serve
+ ~~
+ CategoryInfo          : ObjectNotFound: (ng:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException

E:\demos\demo2 [cordova-angular-sidemenu +1 ~5 -1 !]> npx ng serve
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-03-04T22:34:12.881Z
Hash: e8203a6fa360bd3c865e
Time: 15190ms
chunk {0} 0.js, 0.js.map () 16.6 kB  [rendered]
chunk {1} 1.js, 1.js.map () 12.8 kB  [rendered]
...

[marckassay]

Still have issue after creating a new project with npm (without yarn), and ionic as a global dependency.

See gist for CLI outputs

[marckassay]

I downgraded ionic-cli to 4.6.0 natively on Windows and the same issue still surfaced. But Ubuntu (as WSL) using the same ionic-cli version, it successfully launches. This seems to be the same as what @jsonMartin experienced.

I'm confused on why version 4.6.0, that was release December 2018, still failed on Windows. As I know I used it successfully earlier this year. It seems that this might be a npm-on-Windows and/or nodejs-on-Windows issue? Or perhaps, more specifically, as I mentioned I used npm instead of yarn in my previous comment, that was because yarn has a on-going issue with a cmd shim. It seems to be closely related to what @jsonMartin and I experienced, but I was unable to see any dependencies related to this yarn issue in npm.

@dwieeb, I noticed ionic-cli project has been set to opt-out of producing a lock-file. Why is that?

[imhoffd]

I have a thought. When packages are installed by npm on Windows, it creates two files for each binary (such as ng). Maybe one of them is referencing sh for some reason? It's difficult to dig into issues like these because I can never reproduce. I do have a Windows machine for testing, but I'm not a Windows expert.

Sometimes people find more success by cross-posting issues such as these in the Ionic forum to get more eyes on it, and if the issue is a result of a bug in the Ionic CLI, it can easily be fixed. But I'm guessing there's some misbehaving dependency or misconfiguration leading to this issue.

@janpio I noticed you gave this issue a +1, are you able to debug?

@marckassay I turned off lockfiles because they're not useful for libraries. npm doesn't use them when installing the Ionic CLI. My opinion is they're only useful for codebases that have no dependents.

[janpio]

I can't reproduce now, but seems I could back then. No idea what changed.

E:\Projects\throwaway\ionicServeTest>ionic info

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\Jan\scoop\persist\nvm\nodejs\v10.15.1\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v10.15.1 (C:\Users\Jan\scoop\apps\nvm\current\nodejs\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Maybe that helps to debug what is different for @marckassay:

package-json-and-lock.zip

[marckassay]

@dwieeb I believe you're right about "one of them is referencing sh"! On my Windows setup, I appended .tmp to the node_modules\.bin\ng file in my project and it ran as expected. Specifically I was able to execute ionic serve successfully. This may have been caused by having @angular/cli installed locally, and not globally. At any rate, thanks for this info and answering my question about the lock-file.

@janpio thanks for providing that archive. If I compare with my descriptor files, I'll let you know.

[imhoffd]

@marckassay Interesting! I wonder what is causing npm to create invalid local bin files. The Ionic CLI is expecting the Angular CLI installed locally, but it might(?) work globally. It's using a real subprocess and calling ng. So whatever ng resolves to the Ionic CLI runs.

[marckassay]

Keep in mind I had this problem with Yarn initially. In despair, I upgraded nodejs via nvm and then upgraded npm (fyi, great bat script to upgrade npm on Windows) and issue was seen. And to confirm, a few minutes ago, I upgrade npm to 6.9.0 via bat script, cloned repo, executed ionic cordova build android ... and issue again was seen. I then appended .tmp to node_modules\.bin\ng file and executed ionic cordova build android ... and it ran successfully.

Although, now I'm not using Yarn, the issue I mentioned above seems too relevant at this point for me to not suspect as a culprit.

[marckassay]

I resolved this today. I believe the issue was due to how my environment paths were sorted or (unlikely) by having WSL enabled. Today, in attempts to fixing this issue, I turned off WSL to notice no difference. After that, I rearranged and removed unrelated environment paths to this issue. The diff shows what paths were rearranged and removed. The second revision reflects my environment paths when issue is fixed. Now ionic cordova build android ... executes normally (without changing this name of the file as mentioned in previous posts).

[imhoffd]

Thanks for following up @marckassay.

The Ionic CLI will prepend node_modules/.bin to your paths when running subprocesses (just like how npm does), so people should keep that in mind when troubleshooting.