[BUG] npx package@version uses incorrect installed version in npx 7

[robertIsaac]

Current Behavior:

running npx @package@version generate it with the current install version

Expected Behavior:

it should be generated with the given version

Steps To Reproduce:

ex. steps to reproduce the behavior:

1. run npm i -g npm@latest to install npm 7
2. run npx @angular/cli@next new
3. answer all questions of the angular cli, it doesn't matter what the answers are
4. it will install angular 11 (while next is 12)

Environment:

• OS: Windows 10
• Node: 14.16.1
• npm: 7.12.0 (working fine with 6.14.13)

[wraithgar]

I can not duplicate this. When I run those commands my project has angular 12

~/D/n/a/asdf (master|✔) $ npm ls
asdf@0.0.0 /Users/wraithgar/Development/npm/ar/asdf
├── @angular-devkit/build-angular@12.0.0-rc.3
├── @angular/animations@12.0.0-rc.3
├── @angular/cli@12.0.0-rc.3

I even tried it while having @angular/cli@11 installed globally, my project still got 12.

[robertIsaac]

i tried again now, it's the same
i'm using windows 10

PS C:\Users\rober\test> npm --v
7.13.0
PS C:\Users\rober\test> npx @angular/cli@10 new --defaults ng10
CREATE ng10/angular.json (3027 bytes)
CREATE ng10/package.json (1066 bytes)
CREATE ng10/README.md (994 bytes)
CREATE ng10/tsconfig.json (783 bytes)
CREATE ng10/.editorconfig (274 bytes)
CREATE ng10/.gitignore (604 bytes)
CREATE ng10/.browserslistrc (703 bytes)
CREATE ng10/karma.conf.js (1421 bytes)
CREATE ng10/tsconfig.app.json (287 bytes)
CREATE ng10/tsconfig.spec.json (333 bytes)
CREATE ng10/src/favicon.ico (948 bytes)
CREATE ng10/src/index.html (290 bytes)
CREATE ng10/src/main.ts (372 bytes)
CREATE ng10/src/polyfills.ts (2820 bytes)
CREATE ng10/src/styles.css (80 bytes)
CREATE ng10/src/test.ts (743 bytes)
CREATE ng10/src/assets/.gitkeep (0 bytes)
CREATE ng10/src/environments/environment.prod.ts (51 bytes)
CREATE ng10/src/environments/environment.ts (658 bytes)
CREATE ng10/src/app/app.module.ts (314 bytes)
CREATE ng10/src/app/app.component.html (23777 bytes)
CREATE ng10/src/app/app.component.spec.ts (934 bytes)
CREATE ng10/src/app/app.component.ts (208 bytes)
CREATE ng10/src/app/app.component.css (0 bytes)
✔ Packages installed successfully.
warning: LF will be replaced by CRLF in .browserslistrc.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
    Successfully initialized git.
PS C:\Users\rober\test> cd .\ng10\
PS C:\Users\rober\test\ng10> npm ls
ng10@0.0.0 C:\Users\rober\test\ng10
+-- @angular-devkit/build-angular@12.0.0
+-- @angular/animations@12.0.0
+-- @angular/cli@12.0.0
+-- @angular/common@12.0.0
+-- @angular/compiler-cli@12.0.0
+-- @angular/compiler@12.0.0
+-- @angular/core@12.0.0
+-- @angular/forms@12.0.0
+-- @angular/platform-browser-dynamic@12.0.0
+-- @angular/platform-browser@12.0.0
+-- @angular/router@12.0.0
+-- @types/jasmine@3.6.11
+-- @types/node@12.20.13
+-- jasmine-core@3.7.1
+-- karma-chrome-launcher@3.1.0
+-- karma-coverage@2.0.3
+-- karma-jasmine-html-reporter@1.6.0
+-- karma-jasmine@4.0.1
+-- karma@6.3.2
+-- rxjs@6.6.7
+-- tslib@2.2.0
+-- typescript@4.2.4
`-- zone.js@0.11.4

PS C:\Users\rober\test\ng10> npm i -g npm@6

added 2 packages, removed 236 packages, changed 3 packages, and audited 54 packages in 5s

found 0 vulnerabilities
PS C:\Users\rober\test\ng10> cd ..
PS C:\Users\rober\test> npx @angular/cli@10 new --defaults angular10
Option "entryComponent" is deprecated: Since version 9.0.0 with Ivy, entryComponents is no longer necessary.
CREATE angular10/angular.json (3590 bytes)
CREATE angular10/package.json (1252 bytes)
CREATE angular10/README.md (1018 bytes)
CREATE angular10/tsconfig.json (458 bytes)
CREATE angular10/tslint.json (3185 bytes)
CREATE angular10/.editorconfig (274 bytes)
CREATE angular10/.gitignore (631 bytes)
CREATE angular10/.browserslistrc (853 bytes)
CREATE angular10/karma.conf.js (1021 bytes)
CREATE angular10/tsconfig.app.json (287 bytes)
CREATE angular10/tsconfig.spec.json (333 bytes)
CREATE angular10/src/favicon.ico (948 bytes)
CREATE angular10/src/index.html (295 bytes)
CREATE angular10/src/main.ts (372 bytes)
CREATE angular10/src/polyfills.ts (2830 bytes)
CREATE angular10/src/styles.css (80 bytes)
CREATE angular10/src/test.ts (753 bytes)
CREATE angular10/src/assets/.gitkeep (0 bytes)
CREATE angular10/src/environments/environment.prod.ts (51 bytes)
CREATE angular10/src/environments/environment.ts (662 bytes)
CREATE angular10/src/app/app.module.ts (314 bytes)
CREATE angular10/src/app/app.component.html (25725 bytes)
CREATE angular10/src/app/app.component.spec.ts (949 bytes)
CREATE angular10/src/app/app.component.ts (213 bytes)
CREATE angular10/src/app/app.component.css (0 bytes)
CREATE angular10/e2e/protractor.conf.js (869 bytes)
CREATE angular10/e2e/tsconfig.json (294 bytes)
CREATE angular10/e2e/src/app.e2e-spec.ts (642 bytes)
CREATE angular10/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
warning: LF will be replaced by CRLF in .browserslistrc.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .editorconfig.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in angular.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/protractor.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.e2e-spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/src/app.po.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in e2e/tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in karma.conf.js.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package-lock.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in package.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.spec.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.component.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/app/app.module.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.prod.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/environments/environment.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/index.html.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/main.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/polyfills.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/styles.css.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in src/test.ts.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.app.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tsconfig.spec.json.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in tslint.json.
The file will have its original line endings in your working directory
    Successfully initialized git.
PS C:\Users\rober\test> cd .\angular10\
PS C:\Users\rober\test\angular10> npm ls --depth 0
angular10@0.0.0 C:\Users\rober\test\angular10
+-- @angular-devkit/build-angular@0.1002.3
+-- @angular/animations@10.2.5
+-- @angular/cli@10.2.3
+-- @angular/common@10.2.5
+-- @angular/compiler@10.2.5
+-- @angular/compiler-cli@10.2.5
+-- @angular/core@10.2.5
+-- @angular/forms@10.2.5
+-- @angular/platform-browser@10.2.5
+-- @angular/platform-browser-dynamic@10.2.5
+-- @angular/router@10.2.5
+-- @types/jasmine@3.5.14
+-- @types/jasminewd2@2.0.9
+-- @types/node@12.20.13
+-- codelyzer@6.0.2
+-- UNMET PEER DEPENDENCY jasmine-core@3.6.0
+-- jasmine-spec-reporter@5.0.2
+-- karma@5.0.9
+-- karma-chrome-launcher@3.1.0
+-- karma-coverage-istanbul-reporter@3.0.3
+-- karma-jasmine@4.0.1
+-- karma-jasmine-html-reporter@1.6.0
+-- protractor@7.0.0
+-- rxjs@6.6.7
+-- ts-node@8.3.0
+-- tslib@2.2.0
+-- tslint@6.1.3
+-- typescript@4.0.7
`-- zone.js@0.10.3

npm ERR! peer dep missing: jasmine-core@>=3.7.1, required by karma-jasmine-html-reporter@1.6.0
npm ERR! peer dep missing: jasmine-core@>=3.7.1, required by karma-jasmine-html-reporter@1.6.0
PS C:\Users\rober\test\angular10>

[wraithgar]

What does npx @angular/cli@10 --version show?

[robertIsaac]

What does npx @angular/cli@10 --version show?

PS C:\Users\rober> npx @angular/cli@10 --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 12.0.0
Node: 14.16.1
Package Manager: npm 7.13.0
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1200.0 (cli-only)
@angular-devkit/core         12.0.0 (cli-only)
@angular-devkit/schematics   12.0.0 (cli-only)
@schematics/angular          12.0.0 (cli-only)

[rfgamaral]

I think I came across a similar (same?) issue:

~/Workspace/Playground/TestProject
❯ node --version
v16.7.0

~/Workspace/Playground/TestProject
❯ npm --version
7.22.0

~/Workspace/Playground/TestProject
❯ npm init -y
Wrote to /home/Ricardo/Workspace/Playground/TestProject/package.json:

{
  "name": "testproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

~/Workspace/Playground/TestProject
❯ npm install --save-dev browserslist@4.7.0

added 4 packages, and audited 5 packages in 610ms

1 package is looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.

~/Workspace/Playground/TestProject
❯ npx browserslist --version
browserslist 4.7.0

~/Workspace/Playground/TestProject
❯ npx browserslist@latest --version
browserslist 4.7.0

~/Workspace/Playground/TestProject
❯ npm install --save-dev browserslist@latest

added 2 packages, changed 1 package, and audited 7 packages in 557ms

2 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

~/Workspace/Playground/TestProject
❯ npx browserslist --version
browserslist 4.17.0

Summary:

• Created a new project
• Installed older browserslist version
• Running npx browserslist --version gives the older installed version ✔
• Running npx browserslist@latest --version gives the installed version ❌
  • Expected version being 4.17.0 (latest at the time of writing)
• Installed latest browserslist version
• Running npx browserslist --version gives the latest installed version ✔

[lukekarrys]

@rfgamaral Thanks for the additional report. I believe this is the same issue and I'm going to update the title of this issue to track it as such.

[Den-dp]

Looks like a globally installed package breaks calling via npx, since it has a higher priority.

Simple reproduction for npm@8.1.1

1. check that svgo isn't installed globally:

> npm ls svgo -g
C:\Users\denis\AppData\Roaming\npm
`-- (empty)

2. run --version command of old svgo

> npx svgo@2.5.0 --version
2.5.0

3. globally install newer svgo

> npm i svgo@2.7.0 -g

added 18 packages, and audited 19 packages in 3s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

4. here is where it stopped working

> npx svgo@2.5.0 --version
2.7.0

[janpio]

Note that this does not only apply to globally installed packages, but also local ones:

Reproduction commands:

mkdir npxRepro
cd npxRepro
npm init -y
npm install prisma
npx prisma -v
npx prisma@3.11.1 -v
npx -v
node -v

And my result with npx 8.3.1:

PS C:\Users\Jan\Documents\throwaway> mkdir npxRepro
PS C:\Users\Jan\Documents\throwaway> cd .\npxRepro\
PS C:\Users\Jan\Documents\throwaway\npxRepro> npm init -y
Wrote to C:\Users\Jan\Documents\throwaway\npxRepro\package.json:

{
  "name": "npxrepro",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


PS C:\Users\Jan\Documents\throwaway\npxRepro> npm install prisma

added 2 packages, and audited 3 packages in 4s

found 0 vulnerabilities
PS C:\Users\Jan\Documents\throwaway\npxRepro> npx prisma -v
prisma                  : 3.12.0
[...]
PS C:\Users\Jan\Documents\throwaway\npxRepro> npx prisma@3.11.1 -v
Need to install the following packages:
  prisma@3.11.1
Ok to proceed? (y) y
prisma                  : 3.12.0
[...]
PS C:\Users\Jan\Documents\throwaway\npxRepro> npx -v
8.3.1
PS C:\Users\Jan\Documents\throwaway\npxRepro> npm -v
8.3.1
PS C:\Users\Jan\Documents\throwaway\npxRepro> node -v
v16.14.0

Note how the second -v of prisma with the explicit version 3.11.1 asks me if I want to install prisma@3.11.1, actually does it, and then runs 3.12.0 anyway.

There is no global prisma installed btw:

PS C:\Users\Jan\Documents\throwaway\npxRepro> npm ls prisma -g
C:\Users\Jan\AppData\Local\Volta\tools\image\node\16.14.2
`-- (empty)

[janpio]

A comment on the severity of this:
We have pipelines that depend on this behavior to use a specific version (vs. what is defined in the project). Upgrading to newer npm/npx partially broke these and made tests fail (good), others silently used the wrong version and produced unexpected and wrong results which unfortunately were not caught by tests (not good at all).