How to install Angular CLI locally (without the -g flag)

Question

I've just started working with Angular and with Angular-CLI and I've seen that, according to the documentation, I need to install $ npm install -g @angular/cli with the -g (global) flag.

However I would like to have Angular-CLI installed locally with the rest of my node_modules packages. This way, when I've download my project from git, I could simply run $ npm install (for installing all the dependencies in my package.json).

I try to create a new project by running $ npm init and then run $ npm i @angular/cli -D (-D is the same as --save-dev). But then when I run $ ng new project-name a new sub directory was created with a separate node_modules directory.

Installing it globally doesn't prevent you from installing it locally. And that's what ng new will do: it will create a new project and install ng-cli inside the project. The global ng command delegates to the project's cli. And anyone can download the project and use npm commands to invoke the local ng cli (without installing it globally). But of course developers should have it installed globally to make things easier. — JB Nizet
– JB Nizet, Commented Jan 6, 2018 at 15:37
1. to be able to create new projects. 2. to be able to use other ng commands inside a project by just typing ng xxx instead of ./node_modules/.bin/ng xxx. — JB Nizet
– JB Nizet, Commented Jan 6, 2018 at 15:42
Note that you should be using @angular/cli. You only need the global import for ng commands to work everywhere and directly, rather than only via node_modules/.bin. When you check out an existing project, you could just alias everything via the package.json. — jonrsharpe
– jonrsharpe, Commented Jan 6, 2018 at 15:55
You only get rep on edits under 2k total rep and up to a maximum (1k, see stackoverflow.com/help/whats-reputation) per user, so your argument doesn't really hold up. If you weren't aware of that by 1k, note help is available: stackoverflow.com/help/editing. I'm editing because 1. the formatting was bad (review the help/markdown syntax and please don't put things that aren't actually code in inline code); and 2. that simply isn't the name of the framework. And again please note that angular-cli is the old, deprecated name of the package. — jonrsharpe
– jonrsharpe, Commented Jan 6, 2018 at 16:18
I search a lot to find you a solution but I got nothing. dirtiest way is after it created sub directory for you move created files and folders one level higher angular-cli is still available for you if is it in your node_module — Vala Khosravi
– Vala Khosravi, Commented Jan 6, 2018 at 16:35

Carlos Morales · Accepted Answer · 2020-05-08 09:14:59Z

74

Short Answer / TLTR

Start your project by specifying the package -p @angular/cli, so node can find the program:

npx -p @angular/cli ng new <project-name>

Long Answer

The npm ecosystem has been moving more and more towards installing tools as project-local devDependencies, instead of requiring users to install them globally. This is considered a good practice. As it allows to use multiple versions (one per project), instead of having one unique global version.

In order to start the project from scratch, you need to point to the package with -p flag (otherwise npx will not find it):

npx -p @angular/cli ng new <project-name>

- npx

npx is a command that is installed together with node and npm, starting version 5.2 (July 2017). Most probably you already have it installed.

npx allows you to run that npm command without having it installed locally. npx will look for the latest version of the specified package (in this case @angular/cli) and run the command ng from the bin folder.

- specific versions

You could also install a specific version of Angular CLI. For example, let's say we need to install version 9.1. We could run:

npx -p @angular/[email protected] ng new <project-name>

- once it is installed

After the Angular CLI installs the project, go to the folder and use the npx ng directly. For example:

npx ng serve

This will search inside the node_modules/.bin/ folder for the ng command, which is a soft link pointing to ../@angular/cli/bin/ng, the locally installed ng command.

Links

edited May 8, 2020 at 9:14

answered May 28, 2019 at 16:04

Carlos Morales

5,9364 gold badges36 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

McFiddlyWiddly Over a year ago

is npx -p @angular/[email protected] ng new <project-name> different from npx -p @angular/[email protected] new <project-name>?

Carlos Morales Over a year ago

yes they are different. In the first one, you are asking npm to 1) install this package first and then 2) run "ng" command. In the second version you are asking 2) run "new" command, the result will be new: command not found

Tlotli Otlotleng Over a year ago

To run ng commands without Angular/Cli installed locally, you can use the same npx command npx ng g c home --change-detection

Jessy · Accepted Answer · 2018-05-16 17:18:49Z

61

As some of the comments suggest, you can have a local and global version of angular cli on your system.

To be able to access your local version instead of global (lets say you have a different version installed locally then your global install) use npm run-script ng

for example npm run-script ng generate component SomeCoolComponent

check out this answer on github to a similar question: https://github.com/angular/angular-cli/issues/5955#issuecomment-320273493

answered May 16, 2018 at 17:18

Jessy

1,22718 silver badges29 bronze badges

1 Comment

Robharrisaz Over a year ago

This was perfect for my issue which was to be able to execute the local package rather than global on a build server where installing global version is not an option.

Junaid · Accepted Answer · 2020-10-27 11:20:40Z

37

TL;DR
Use a package called npx (run npm i -g npx if not already installed) and when you need to create an angular project, just use this command the very first time:
npx -p @angular/cli ng new hello-world-project

Explanation:
So For example if you want to create angular 4 project, modify the above command to include the angular-cli version 1.4.10 like this npx -p @angular/[email protected] ng new hello-world-project and then when your project setup is complete you can go back to using the normal ng generate and other commands.

Angular-cli versions indicate which angular version will be associated with a project & angular-cli 1.4.10 creates angular 4 projects

Edits:

Here is some useful versioning info about which cli creates which angular version.

 CLI version     Angular version

 1.0 - 1.4.x       ^4.0.0
 1.5.x             ^5.0.0
 1.6.x - 1.7.x     ^5.2.0
 6.x               ^6.0.0
 7.x               ^7.0.0

Also, if you want to use latest stable version to create a certain angular project you can just use npx command like this npx -p @angular/[email protected] and it will use cli version 1.7.4 which is the most latest stable version for angular 5.

Check out this SO answer here where some other devs are trying to unfold this mystery.

edited Oct 27, 2020 at 11:20

answered Jun 10, 2018 at 9:13

Junaid

4,9641 gold badge39 silver badges46 bronze badges

4 Comments

shadowbq Over a year ago

npx is now by default installed with 5.2+ of npm the default manager of node.js. This should be a more widely accepted answer in 2018

Noumenon Over a year ago

When you say "You can go back to using the normal ng generate", you mean in your other projects, right? In this project, you will have to use npx ng generate.

Junaid Over a year ago

No, just use the same ng generate in this project(created using npx) too. No need to disturb npx anymore. In simple words, npx will only be used to create/setup your project with the desired angular version, nothing else. After that just forget about npx.

Volodymyr Gorodytskyi Over a year ago

@Junaid thanks for an answer, for experimental purpose I've uninstalled angular cli globally npm uninstall -g @angular/cli, than I created new angular project with npx -p @angular/cli ng new hello-world-project and after running command ng build I get error The term 'ng' is not recognized as the name of a cmdlet..., so looks like using npx term is required in this approach.

Y Y · Accepted Answer · 2020-09-26 02:16:14Z

12

To install angular locally:

npm init -y
npm i @angular/cli
npx ng new app-name

To update a locally installed angular version, say bump 8.x to 9.x, you can use

npx ng update @angular/core@9 @angular/cli@9

answered Sep 26, 2020 at 2:16

Y Y

5237 silver badges16 bronze badges

Comments

Basil · Accepted Answer · 2019-07-12 13:01:46Z

3

Just Follow this command

npm install  @angular/cli

It worked for me.

answered Jul 12, 2019 at 13:01

Basil

1,92318 silver badges27 bronze badges

Comments

edkeveked · Accepted Answer · 2022-11-24 15:13:06Z

3

Since angular 14, it is possible to do

npm init @angular

answered Nov 24, 2022 at 15:13

edkeveked

18.4k10 gold badges60 silver badges95 bronze badges

Comments

go je jo · Accepted Answer · 2023-04-26 23:55:05Z

3

To create a new angular project:

npx -p @angular/cli ng new myApp

To create a new angular project on the current folder using the current folder's name as the project name in linux:

npx -p @angular/cli ng new $(basename "$PWD") --directory=./

create angular app in the current directory especially when the current folder is already a git repo

npx -p @angular/cli ng new $(basename "$PWD") --directory=./ --skip-git

To use the angular cli inside the project:

npx ng --version

edited Apr 26, 2023 at 23:55

answered Apr 26, 2023 at 23:43

go je jo

4016 silver badges10 bronze badges

Comments

Koustav · Accepted Answer · 2019-08-26 19:27:16Z

To install angular locally follow the steps - Let angular 8 is installed globally, and we need to install angular 6 locally - We shall create a folder named "angular6" in C drive and shall create a angular 6 project named "ng6-test-project" inside it.

type the following command in terminal -

    c:\> md angular6
    c:\> cd angular6
    c:\angular6> md ng6-test-project
    c:\angular6> cd ng6-test-project
    c:\angular6\ng6-test-project> npm install @angular/[email protected]
    c:\angular6\ng6-test-project> cd..
    c:\angular6> npx -p @angular/[email protected] ng new ng6-test-project
    c:\angular6> cd ng6-test-project
    c:\angular6\ng6-test-project> npx ng --version
    c:\angular6\ng6-test-project> npm audit fix
    c:\angular6\ng6-test-project> npx ng serve --port 4201

if any error occurs in any packages and version like rxjx etc open package.json and find "rxjs": "~6.4.0" and change it to "rxjs": "6.0.0" and save. Then in terminal , type the following to update rxjs -

    c:\angular6\ng6-test-project> npm install

to fix any warning in packages run the following -

    c:\angular6\ng6-test-project> npm audit fix

type the following to check the angular version locally

    c:\angular6\ng6-test-project> npx ng --version

this will result the new angular version saved locally

To run the project in a new port - type the following -

    c:\angular6\ng6-test-project> npx ng serve --port 4201

jornare · Accepted Answer · 2018-01-06 15:59:20Z

1

To use ng from the command-line it needs to be in that directory or in your systems PATH variable.

Before you have a project, you have no ng available. Installing it with npm i @angular/cli will only install it in node_modules folder and not make it available in the PATH.

Therefore it needs to be installed globally at least once, because a globally installed node module have the option to be available in PATH.

Once this is done, you can install the version of your choice in your projects folder since this version will be used by the global version when it exists.

edited Jan 6, 2018 at 15:59

answered Jan 6, 2018 at 15:45

jornare

2,89321 silver badges28 bronze badges

3 Comments

Gil Epshtain Over a year ago

So according to this answer, once I've created a new project using ng new project-name I can delete angular-cli from the global node_models and still be able to use ng generate X (since angular-cli is also installed in the local node_modules?

jornare Over a year ago

No, as this is what is first executed when only typing 'ng' (because it is in the PATH variable), but it will look for another version in your current folders node-modules and execute that if it exist.

jornare Over a year ago

Try this: install an old version globally (say 1.5.5) typing ng --version will now yield 1.5.5. Install another version locally (say 1.6.0) typing ng --version will now yield 1.6.0. remove the global version. typing ng --version will not execute.

Alabi Temitope · Accepted Answer · 2018-09-03 20:28:30Z

How to install lower version of angular or another version of angular on your system make sure updated version is installed globally npm install g @angular/cli

go to the project directory which you have lower version or another version of angular project different from the version install globally e.g if you want to work on angular 2 ..run the command below

npm install ng serve

Note: don't copy any of your node modules from your previous project if the current project you want to work on ,its version its different from formal project which you work on in the past check "@angular/cli": "version" check "@angular/cli": "version", which is located in package.json if its version 1.2.0 its angular 2, version 1.7.0 its angular 6

Rinold · Accepted Answer · 2018-11-02 05:31:14Z

1

After gobal installation of angular cli using command

npm i -g @angular/cli@(latest or 1)

ng new app-name

Goto the file directory where you would like to create your angular app. Use command ng new any-name to create angular app which global angular cli will take care to install local cli version.

To install manually for a new project,

npm init -y

npm install @angular/cli@(latest or 1)

(remove package.json before using the next command) ng new app-name here ng will use the local cli version to create the angular app version 5 or 6 or 7 based on of the local ng version installed.

to install local in exisiting one use only the command npm install @angular/cli@(latest or 1).

answered Nov 2, 2018 at 5:31

Rinold

3511 gold badge2 silver badges12 bronze badges

1 Comment

Jennifer S Over a year ago

The user specifically asked how to do this without using the -g flag.

Collectives™ on Stack Overflow

How to install Angular CLI locally (without the -g flag)

11 Answers 11

Short Answer / TLTR

Long Answer

- npx

- specific versions

- once it is installed

Links

3 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

Short Answer / TLTR

Long Answer

- npx

- specific versions

- once it is installed

Links

3 Comments

1 Comment

4 Comments

Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related