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

AngularAngular CliNpm InstallNode Modules

Angular Problem Overview


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.

Angular Solutions


Solution 1 - Angular

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

Solution 2 - Angular

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

Solution 3 - Angular

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.

Solution 4 - Angular

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

Solution 5 - Angular

Just Follow this command

npm install  @angular/cli

It worked for me.

Solution 6 - Angular

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.

Solution 7 - Angular

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

Solution 8 - Angular

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

Solution 9 - Angular

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionGil EpshtainView Question on Stackoverflow
Solution 1 - AngularJessyView Answer on Stackoverflow
Solution 2 - AngularJunaidView Answer on Stackoverflow
Solution 3 - AngularCarlos MoralesView Answer on Stackoverflow
Solution 4 - AngularY YView Answer on Stackoverflow
Solution 5 - AngularBasilView Answer on Stackoverflow
Solution 6 - AngularjornareView Answer on Stackoverflow
Solution 7 - AngularAlabi TemitopeView Answer on Stackoverflow
Solution 8 - AngularKoustavView Answer on Stackoverflow
Solution 9 - AngularRinoldView Answer on Stackoverflow