Step-by-Step Guide: Installing Angular and Setting Up Your Development Environment

Step-by-Step Guide: Installing Angular and Setting Up Your Development Environment

As we all know that Angular, is a popular JavaScript framework for building web applications. Here we will cover the essential steps for installing Angular and Setting Up Your Development Environment effectively. So let's keep everything aside and directly come to the point, let's start discussing the installation process.

Installation

To install Angular, there are a few prerequisites that need to be in place. Here are the common prerequisites for Angular installation:

  1. Node.js: Angular requires Node.js, a JavaScript runtime, to be installed on your system. Node.js includes npm (Node Package Manager), which is used to manage Angular dependencies and packages. You can download Node.js from the official website (nodejs.org) and follow the installation instructions for your operating system. After completing the process you can check the node version by node -v

     icluster@Bibhas-iMac ~ % node -v
     v16.17.1
    
  2. npm (Node Package Manager): npm comes bundled with Node.js, so once you have Node.js installed, you will automatically have npm available. npm is used to install Angular and its dependencies. Make sure you have a compatible version of npm by running the following command in your terminal or command prompt: npm -v

     icluster@Bibhas-iMac ~ % npm -v
     8.15.0
    
  3. Code Editor: You will need a code editor or Integrated Development Environment (IDE) to write and manage your Angular code. Popular choices for Angular development include Visual Studio Code, WebStorm, and Sublime Text. Choose the code editor that suits your preferences and install it before starting with Angular development.

Once you have these prerequisites in place, you are ready to proceed with the installation of Angular itself using the Angular CLI (Command Line Interface). The Angular CLI is a command-line tool that simplifies the creation and management of Angular projects.

To install the Angular CLI globally, open your terminal or command prompt and run the following command: npm install -g @angular/cli and after finish the process you can check the angular version by ng version and you you will get something like this (your node version, angular version and npm verson may not be same as mine)

icluster@Bibhas-iMac ~ % ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 16.1.4
Node: 16.17.1
Package Manager: npm 8.15.0
OS: darwin x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1601.4 (cli-only)
@angular-devkit/core         16.1.4 (cli-only)
@angular-devkit/schematics   16.1.4 (cli-only)
@schematics/angular          16.1.4 (cli-only)

With the prerequisites installed and the Angular CLI set up, you are now ready to create Angular projects, build applications, and leverage the full power of the Angular framework.

**Note: If you are satting with angular, Please check my Angular series

Did you find this article valuable?

Support Bibhas srt Ghoshal by becoming a sponsor. Any amount is appreciated!