Npx with angular cli, how to install @angular/cli and use it afterwards

Question

I just found NPX, this tool lets you install global packages without sudo rights. I want to use it with my angular projects.

I run

dev@b7ee560044f1:~/project$ npx -p @angular/cli ng version
npx: installed 294 in 6.391s

Looks good, it works

But if i retry the same command i will get

dev@b7ee560044f1:~/project$ npx @angular/cli ng version
npx: installed 294 in 4.725s

Why NPX installs angular cli package every time? I thought that downloading package is performed only once and cached somewhere..

I thought that this command would work but it doesn't...

dev@b7ee560044f1:~/project$ npx ng version
npx: installed 1 in 0.98s
command not found: ng

Vicky

NPX installs in memory then removes it. Just do npm i -g @angular/cli and it'll be accessible in your binary. – So

If you want to have a local copy then you can do this npm install @angular/cli. It will be saved locally so that you can maintain versions between different projects. – Ingravescent

Whole thing about NPX is that it lets you not pollute you global scope with packages. npm i -g requires SUDO rights – Vicky

@SiddharthSinha, why npx exists then? – Vicky

You may locally install npm install @angular/cli and run node_modules/.bin/ng serve. – Reconcilable

You don't need sudo to do npm i -g thing docs.npmjs.com/… – Metsky

seems to contradict what is written in this tutorial : medium.com/@starikovs/… Is your @angular/cli referenced in the dev dependencies of your package.json ? – Quinnquinol

Answer 1

As Bharat already wrote: -p is maybe what you are looking for.

Local (Global) I'm using @angular/[email protected].

But with the following command:

npx -p @angular/cli@8 ng new sample-application --style=scss

I was able to create a new angular project with the latest 8.x version (8.2.14).

Purdy

Answer 2

Just adding to @Crazybutch answer, after the package has been "invoked" the first time in that project, one can invoke angular CLI afterwards with a shorter command:

npx -p @angular/cli ng new hello-world-project 

npx ng --version
npx ng generate component my-component

Maybe that was obvious to many, but at some point I thought I had to retype npx -p @angular/cli ng ... again and again before the actual command.

Source: How to use Angular CLI locally

Ferrari

Answer 3

This tool allow you to run commands from the npm registry but the cli is not stored locally.

PD: the alias ng is used to replace the name completely. @angular/cli is the whole name ng is the alias. You should use or run npx @angular/cli (command) like generate for instance would be npx @angular/cli generate component helloworld

Pyralid

Answer 4

npx is ideally used for temporarily installing packages from npm and running them one time so if you want install Angular CLI and continue using it afterward you need to install using the regular npm install command:

$ npm install --global @angular/cli

Also, make sure you use the --global switch so it can be available from any location in your system.

Replicate

This is the right answer, the user says that npx was used to "install globally" but that's not the goal of npx. npx is a tool to execute one command without that need to permanently install the package. Installing globally without the need of "sudo" can be made using "nvm" having several node version in the home directory. – Idolater

Answer 5

-p, --package <package> - define the package to be installed. This defaults to the value of <command>. This is only needed for packages with multiple binaries if you want to call one of the other executables, or where the binary name does not match the package name. If this option is provided <command> will be executed as-is, without interpreting @version if it's there. Multiple --package options may be provided, and all the packages specified will be installed.

For more details, you can refer here.

Jarlathus