75

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.

Gil Epshtain
  • 8,670
  • 7
  • 63
  • 89
  • 8
    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 Jan 06 '18 at 15:37
  • If so, why do I need a duplication of angular-cli, once as a global package and a second time as a local package?? – Gil Epshtain Jan 06 '18 at 15:40
  • 5
    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 Jan 06 '18 at 15:42
  • 2
    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 Jan 06 '18 at 15:55
  • And please don't revert legitimate edits. – jonrsharpe Jan 06 '18 at 15:59
  • Please stop your edit-war. I'm with jonrsharpe on this one. – jornare Jan 06 '18 at 16:06
  • If you don't have any real value edit, please don't edit at all. Removing spaces or changing 'Angular' to 'angular' doesn't add any new value. You do this only to get points on your stack-overflow reputation. Please stop editing unless you actually saying something new – Gil Epshtain Jan 06 '18 at 16:15
  • 1
    You only get rep on edits under 2k total rep and up to a maximum (1k, see https://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: https://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 Jan 06 '18 at 16:18
  • According to Angular-CLI official GitHub issue [#5176](https://github.com/angular/angular-cli/issues/5176) there not longer `ng init` command available. this command could be the solution for your kind of problem. – Vala Khosravi Jan 06 '18 at 16:24
  • @ValaKhosravi, any work around for this issue? – Gil Epshtain Jan 06 '18 at 16:31
  • 1
    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 Jan 06 '18 at 16:35
  • Yes: *install it globally*, as the docs tell you to. If you really want to you can uninstall it again after you `ng new` up each project, but that seems deliberately perverse. Or just stop using the CLI and use a regular quickstart instead. As already commented, the CLI *is* installed locally in each project, the global version allows global `ng` commands. – jonrsharpe Jan 06 '18 at 16:37
  • 1
    https://medium.com/@starikovs/how-to-use-angular-cli-locally-729dbb6707dd – starikovs May 12 '18 at 10:05
  • Not wanting to install Angular CLI globally is fine. I have personally found having a global version to be a detriment more than a benefit. You can run the Angular cli anywhere as long as you have an internet connection. The command is `npx -p @angular/cli ng new my-app` and if you want to run a specific version of Angular you can do `npx -p @angular/cli@13 ng new MyApplication` – Puzzlefactory Jul 16 '22 at 14:08
  • Difference between NPX vs NPM is NPM a package manager used to install, delete, and update Javascript packages on your machine. NPX is a package executer, and it is used to execute javascript packages directly, without installing them. – Tlotli Otlotleng Sep 28 '22 at 06:00

11 Answers11

56

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

Jessy
  • 1,150
  • 16
  • 27
  • 4
    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. – Robharrisaz Oct 23 '18 at 15:40
52

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/cli@9.1 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

Carlos Morales
  • 5,676
  • 4
  • 34
  • 42
  • is `npx -p @angular/cli@9.1 ng new ` different from `npx -p @angular/cli@9.1 new `? – McFiddlyWiddly Apr 30 '21 at 03:03
  • 1
    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` – Carlos Morales May 04 '21 at 20:49
  • To run ng commands without Angular/Cli installed locally, you can use the same npx command `npx ng g c home --change-detection` – Tlotli Otlotleng Sep 27 '22 at 12:19
36

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/cli@1.4.10 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/cli@1.7 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.

Junaid
  • 4,682
  • 1
  • 34
  • 40
  • 6
    `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 – shadowbq Sep 12 '18 at 12:53
  • 1
    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`. – Noumenon Apr 23 '20 at 15:14
  • 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. – Junaid Jun 07 '20 at 11:58
  • @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. – Volodymyr Gorodytskyi Jun 28 '22 at 08:52
11

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
Y Y
  • 443
  • 6
  • 16
3

Just Follow this command

npm install  @angular/cli

It worked for me.

Basil
  • 1,664
  • 13
  • 25
2

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/cli@6.1.1
    c:\angular6\ng6-test-project> cd..
    c:\angular6> npx -p @angular/cli@6.1.1 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
Koustav
  • 556
  • 5
  • 7
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.

jornare
  • 2,903
  • 19
  • 27
  • 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`? – Gil Epshtain Jan 06 '18 at 15:48
  • 1
    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 Jan 06 '18 at 15:52
  • 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. – jornare Jan 06 '18 at 15:57
1

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

Alabi Temitope
  • 405
  • 5
  • 16
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).

Rinold
  • 343
  • 1
  • 2
  • 12
1

Since angular 14, it is possible to do

npm init @angular
edkeveked
  • 17,989
  • 10
  • 55
  • 93
0

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
go je jo
  • 311
  • 4
  • 8