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

Viewed 23802

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
5 Answers

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

Local (Global) I'm using @angular/cli@9.0.3.

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).

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

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.

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

-p, --package - define the package to be installed. This defaults to the value of . 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 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 https://www.npmjs.com/package/npx.

Related