ng update on windows fails when cli version wants to preinstall | loader.js | Cannot find module

[florian-kittel]

🐞 Bug report

Command (mark with an x)

• [ x ] update

Is this a regression?

Yes, the previous version in which this bug was not present was: 6, 7, partially in 8 (depend on the cli version)

Description

A user directory on windows is 'C:\Users\Firstname Lastname...' - what mean it includes a whitespace between the first and last name. When the given project has not the latest cli version installed, a temporary install happen of the lastes cli version to use it for ng update. Then the following error happen (I holde it generic by using "Firstname Lastname":

$ ng update
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
internal/modules/cjs/loader.js:1083
  throw err;
  ^

Error: Cannot find module 'C:\Users\Firstname'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1080:15)
    at Function.Module._load (internal/modules/cjs/loader.js:923:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

🔬 Minimal Reproduction

Have a windows system where the user name uses a whitespace (like "Firstname Lastname" or "John Doe") and an Angular project that has not the latest cli installed. Run ng update.

🔥 Exception or Error

$ ng update
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
internal/modules/cjs/loader.js:1083
  throw err;
  ^

Error: Cannot find module 'C:\Users\Firstname'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1080:15)
    at Function.Module._load (internal/modules/cjs/loader.js:923:27)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)
    at internal/main/run_main_module.js:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

🌍 Your Environment

Angular CLI: 10.1.1
Node: 14.8.0
OS: win32 x64

Angular: 10.1.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1001.1
@angular-devkit/build-angular      0.1001.1
@angular-devkit/build-ng-packagr   0.1001.1
@angular-devkit/build-optimizer    0.1001.1
@angular-devkit/build-webpack      0.1001.1
@angular-devkit/core               10.1.1
@angular-devkit/schematics         10.1.1
@ngtools/webpack                   10.1.1
@schematics/angular                10.1.1
@schematics/update                 0.1001.1
ng-packagr                         10.1.0
rxjs                               6.6.3
typescript                         4.0.2
webpack                            4.44.1

Anything else relevant?
To use ng update it is possible to update the local pacakge to latest version by increasing it in package.json by hand and do an npm install. Then with the lastest version ng update always works. It is the problem with the mechanism to preinstall the lastes version on ng update command.

I also tried to route the global node_modules to a different folder. That works for all global packages, but not for that command. It will always use the users directory.

[alan-agius4]

Related to #17870

[inidaname]

Hello @alan-agius4
I would love to take a look at this

[alan-agius4]

Go for it @inidaname.

[inidaname]

Hello @alan-agius4

Thank you, could you point me to a guide of what is expected, I see you suggested on #17870 to implement path escape could you elaborate on that.

Thank you

[inidaname]

@alan-agius4
going through a similar issue on another project one of the suggested fixes mentioned on nodejs/node#7367 (comment) is to add an option of { shell: true } is this a fix that would be welcome, due to other concern mentioned in the same thread nodejs/node#7367 (comment)

[alan-agius4]

Hi @inidaname, we use shell: true option

angular-cli/packages/angular/cli/utilities/install-package.ts

Line 211 in 57640be

shell: true,

and hence to why we need to escape the path.

As mentioned in the issue linked, I think wrapped the binPath

angular-cli/packages/angular/cli/utilities/install-package.ts

Line 207 in 57640be

const argv = [binPath, ...args];

in quotes should be enough, but this definitely needs some testing on a Windows machine.

[Sarah-JJ]

Hi @inidaname, we use shell: true option

angular-cli/packages/angular/cli/utilities/install-package.ts

Line 211 in 57640be

shell: true,

and hence to why we need to escape the path.

As mentioned in the issue linked, I think wrapped the binPath

angular-cli/packages/angular/cli/utilities/install-package.ts

Line 207 in 57640be

const argv = [binPath, ...args];

in quotes should be enough, but this definitely needs some testing on a Windows machine.

In the project folder in \node_modules@angular\cli\utilities\install-package.js, I replaced
const argv = ['${binPath}', ...args];
with
const argv = [binPath, ...args];
And ng update started working again

[alan-agius4]

@Sarah-JJ, please update the global CLI to the latest version as the mentioned issue has already been resolved in 12.0.3.

npm i -g @angular/cli

[ghost]

@Sarah-JJ this solution worked for me.

@alan-agius4 : that solution didnt work for me. i was already using version 12.0.3 but I did also install it globally. it didnt change anything, the error was still there.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}