DEV Community

Cover image for Installing Angular CLI Locally & Globally
Wisdom John ikoi
Wisdom John ikoi

Posted on

Installing Angular CLI Locally & Globally

Angular is a JavaScript Framework and it is one of the world most powerful web development platform.

Starting an angular project will require an IDE and a development environment. Setting up a project can be done in two ways either by setting up on the cloud or by setting up a local environment and workspace.

While working directly in a cloud-based environment is an awesome experience, setting up your coding project in a local environment is mostly preferred especially on a large project and code base.

This article explains how to set up your Angular development environment locally or globally using the Angular CLI tool.

Globally

To install angular CLI globally Run the following command on your VSCode Terminal or Command Prompt.

npm install -g @angular/cli

Enter fullscreen mode Exit fullscreen mode

(Optional)

_The following is angular's execution policy, see the official documentation:

https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies_

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Enter fullscreen mode Exit fullscreen mode

You have successfully installed the angular CLI globally with the latest version of angular.

You can now create an angular application in any directory it will listen for the global CLI.

To create a new workspace navigate to a specific folder in your terminal and run:

ng new appName
Enter fullscreen mode Exit fullscreen mode

A starter app is created, select which feature should be installed alongside your initial app and press enter.

now your app is created, and depends on the angular CLI version that was installed globally.

Locally

While creating subsequent angular applications (ng apps) you might want a lesser version and you may not want to re-install your global CLI because it will affect other apps that depend on it.

This is where local CLI installation comes in. The local CLI serves as a dependency to an ng-app or a set of ng-apps ignoring the Global CLI.

which means the Global CLI can be angular V14 and the local CLI supports angular V13 making all apps that depend on it respond to that angular version.

The local CLI serves as a guard and restricts apps from listening to the global CLI.

To set up an angular application locally do the following.

  1. Open a folder on your code editor. i.e VSCode, Atom, Brackets e.t.c.

  2. On the terminal navigate to the folder you want to install angular CLI on locally.

  3. Run the following command.

npm install @angular/cli@V13.3.3
Enter fullscreen mode Exit fullscreen mode

Notice the omitted -g and the version indication? here we are installing an angular CLI-specific version.

  1. In that same folder create your starter app.
ng new appName
Enter fullscreen mode Exit fullscreen mode

**
Conclusion**

Any Application you generate within that folder/directory is restricted to the Angular locally installed CLI version.

While the ones created outside the folder automatically listen for the global CLI and subscribe to it as its dependency.

Installing Angular CLI locally or globally has its own effect on the development process, you can choose to subscribe to the global CLI or create a local CLI for your individual angular application to depend on.

Extra

I prefer to localize my angular projects and give them standalone CLI as I see fit, what do you prefer?

Top comments (5)

Collapse
 
naucode profile image
Al - Naucode

That was a nice read! Liked, bookmarked and followed, keep the good work!

Collapse
 
xenxei46 profile image
Wisdom John ikoi

Thank you.

Collapse
 
alexey_ryzhkov_c13bb6e84a profile image
Alexey Ryzhkov

Hi, thanks for sharing the approach. Running some projects on the same windows machine I've faced to use different nodejs and angular cli versions simultaneously. I follow your way and have an issue with running ng when angular cli installed locally. I didn't install angular cli globally. I'm not sure do I need to have global angular cli if I need local versions? I will continue to try run it but it will be very kindly to hear your recommendations :) Thanks in advance.

Collapse
 
alexey_ryzhkov_c13bb6e84a profile image
Alexey Ryzhkov

BTW. Hope it will help someone like me. For sure ng and ng.cmd are in the local node_modules. Maybe I can run it locally with direct path to them. But I just install globally lower version of angular/cli. Thus I can run "ng new ". And it works well.
Meanwhile I did steps after failure to run ng with local angular/cli:
State: No global anguar/cli. Local angular/cli is 18.1.1

  1. npm install -g @angular/cli@18.0 // especially to separate and test how it will work
  2. test ng and it works now but shows version 18.0
  3. install new app: ng new cli181
  4. move to cli181
  5. ng version // 18.1.1 as it is desired
  6. run ng serve --open --watch // it works as expected
Collapse
 
manojmj profile image
Manojkumar

very informative content