Angular Environment Setup

Angular Environment Setup Step by Step

In this article, I am going to discuss the Angular Environment Setup Step by Step. Please read our previous article where we discussed the Angular Versions and Versioning in detail. At the end of this article, you will understand the software and tools required for Angular Environment Setup.

Software Requirements for Angular Environment Setup:

In order to develop Angular 2 or any higher version application on your machine, the following things are required

  1. IDE (for writing code) 
  2. Node.js (Node.js is an open-source cross-platform javascript run-time environment)
  3. Npm (NPM is node.js package manager for javascript programming language. It is automatically installed when we install node.js)
  4. Typescript (It is the programming language)
  5. Angular CLI (It is a tool that allows us to create a project, build and run the project in the development server directly using the command line command)
IDE (Visual Studio Code):

There are so many editors available to develop Angular applications. They are as follows:

  1. Visual Studio Code
  2. Visual Studio 2015, 2017, 2019, etc.
  3. Eclipse
  4. Emacs
  5. WebStorm
  6. Atom
  7. Sublime Text,
  8. Vim, etc.

But for this course, we are going to use Visual Studio Code as our editor which is free and provided by Microsoft. But, you can use any of your favorite editors to build Angular applications using Typescript.

How to Install Visual Studio Code

Let us see how to install the Visual Studio Code in the Windows Operating System step by step. First, download the Visual Studio Code from their official website by visiting the following link.

https://code.visualstudio.com/

Once you go to the above website then just click on the Download menu which you can find at the top of the website as shown below.

How to Install Visual Studio Code

Once you click on the Download menu, then it will open the following page. Based on your operating system choose the appropriate visual studio. I have windows 10 installed on my machine, so I installed the Windows option as shown in the below image.

Angular Environment Setup Step by Step

Once the download completed, click on the setup file and it will open the following window asking you to accept the license agreement. Here, simply choose the accept radio button and click on the Next button as shown in the below image.

Angular Environment Setup in Detail

Once you click on the Next button, then it will ask you to choose the location where the visual studio code is going to install. Here, I am going with the default location and then simply click on the Next button as shown below.

Installing Visual Studio code to develop angular application

Once you click on the Next button, then it will open the Select Start Menu Folder window. Again I am going with the default name i.e. Visual Studio Code for the program’s shortcut name and click on the Next button as shown below.

Environment setup for angular application

Once you click on the Next button it will open the Select Additional Tasks window. From this window, check the Create a Desktop Icon and Add to path checkboxes as shown in the below image, and then click on the Next button.

Installing Visual studio code step by step

Once you click on the Next button, then it will open the Ready to install wizard. From this wizard, simply click on the Install button as shown below which will install visual studio code on your machine.

Installing Visual studio code step by step to develop angular application

Once it installed successfully, it will give you the following window, simply click on the Finish button.

Angular Environment Setup

That’s it. Now Visual Studio Code is successfully installed on your machine.

The following are some of the features of Visual Studio Code:
  1. It is a Light editor as compared to the actual Visual Studio.
  2. It can also be used as a coding language such as Java, C#, Clojure, Objective-C, etc.
  3. It supports a built-in Git extension so that you can work with source control without leaving the editor.
  4. It also includes built-in support for IntelliSense code completion, rich semantic code understanding and navigation, and code refactoring.
  5. It includes an interactive debugger, so you can step through source code, inspect variables, view call stacks, etc.
  6. It also provides lots of extensions that are required for development.
What is NodeJS?

The first JavaScript open-source framework which you should learn before learning Angular is NodeJS. NodeJS is an open-source JavaScript framework and this JavaScript Framework primarily does the following two things.

  1. It allows us to run the JavaScript code outside the browser. The NodeJS JavaScript Framework uses the chrome JavaScript engine to execute JavaScript code outside the browser. This is the reason why we are able to create desktops as well as server-based applications using JavaScript.
  2. The NodeJS is also acting as a central repository from where we can get any JavaScript framework using NPM (Node package manager).

The NodeJS is itself a very vast topic. As an Angular developer, we don’t require to learn NodeJS in detail, we need to know is how to use the NPM commands and that we will see in this tutorial as we progress.

Installing Node.js and npm:

Once you installed the IDE, then you need to install the Node.js and NPM on your machine. The angular organization recommended that you should have node.js installed in your machine with version 4.6.x or greater and the npm version should be greater than or equals to 3.x.x. In order to check the node and npm version that is installed on your computer, you need to type node -v and npm –v in the command prompt.

Open the command prompt in administrator mode and then type the command as shown in the below image. As you can see I have already installed the node.js and npm, so it gives me the result as shown below.

Verifying nodejs and npm using command prompt

Downloading and Installing Node.js and npm:

If you have not installed node.js on your machine then just go to the following website and download the latest version of Node.js.

https://nodejs.org/en/download/

Once you are on the above website, then based on your operating system, download the correct installer. For example, if you have Windows 64 bit Operating system, then you need to download the 64 – bit windows installer as shown in the below image. Here, you can show both the LTS (Latest Stable version) and the current version of the node.

Downloading and Installing Node.js and npm in windows machine

Once you download the node.js, then you need to install it. In order to install Launch the installer which will open the node.js setup wizard and you simply need to click on the Next button as shown below.

node.js setup wizard

Once you click on the Next button, it will open the End-User License Agreement window. Here, accept the license agreement and click on the Next button as shown in the below image.

nodejs End-User License Agreement

Once you click on the Next folder it will open the window to select the installation location of node.js. Here, I am simply going with the default folder location and then click on the Next button as shown in the image below.

Installing nodejs for angular environment setup

Once you click on the Next button, it will open the custom setup window. Again, here also I am going with the default setup. So, simply click on the Next button and proceed to the next window as shown below.

Installing nodejs step by step

Once you click on the Next button, it will open the Tools for Native Modules window. This will provides the additional tools which are required to compile native modules. So, check the checkbox and click on the Next button as shown below.

How to install nodejs in windows machine to develop angular application

Once you click on the Next button, it will open the Ready to install the Node.js window. Here, you just need to click on the Install button as shown in the below image.

step by step procedure to install nodejs in windows operating system

Once you click on the Install button, it will install node.js on your machine. If the installation completed successfully, then you will get the following window and simply click on the Finish button.

Installing nodejs and npm for angular environment setup

How to verify the node.js version?

In order to verify the node.js version or whether node.js is installed or not on your machine, you need to use the node -v command in the Command Prompt. This node –v command will help you to show the node.js version currently installed on your system. So, open Command Prompt in Administrator mode and type node -v, and press enter button as shown in the below image.

How to verify the node.js version

As you can see, on my machine node.js v12.16.1 is currently installed. Once you installed node.js, then automatically npm is installed on your machine. That means it is not required to install npm separately. In order to verify the npm version install on your machine, you need to npm -v command in the Command Prompt. So, type npm –v and press enter as shown below which shows you the current version of npm installed on your machine should.

How to verify the npm version

As you can the npm version 6.13.4 is currently installed on my machine.

Installing Typescript

Once you install node.js and npm, next you need to install Typescript which will be our language. You need to install the Typescript whose version should be greater than or equals to 2.2.0. If you have not installed Typescript on your machine or if you have installed a lower version of Typescript (< 2.2.0) then please go to the following website and then download and install the latest version of Typescript.

http://www.typescriptlang.org/

Once you go to the above website then click on the download menu as shown below. Then you will see the command (npm install –g typescript) on the right to install typescript. On the left side, you can see the IDEs which you can use to develop angular applications using typescript.

Installing Typescript for developing angular application

So, open the command prompt in administrator mode, then type npm install –g typescript command and press enter as shown below which will install typescript in your machine.

command to install typescript

Installing Angular CLI:

Once you install node.js, npm, and typescript, the next important thing that you need to install is Angular CLI. The Angular CLI (Command Line Integration) is one of the most important tools which can be used for the setting of Angular Application. Please visit the following website of angular in order to get the command reference.

https://cli.angular.io/

In our Angular CLI article series, we are going to discuss Angular CLI in detail. Here, let see how to install Angular CLI and how to create and run an angular project using CLI.

How to install Angular CLI?

In order to install Angular CLI globally on your machine, you need to use the npm install -g @angular/cli command. So, type npm install -g @angular/cli command and press enter as shown below which will install Angular CLI globally. In the command, the word g referred to globally.

How to install Angular CLI?

It will take some time to install the Angular CLI on your machine. In order to make sure whether you have installed the Angular CLI correctly or not, you need to use the ng v command. Open the command prompt in administrator mode and type ng v and press the enter button. If you see the following CLI version, then the installation is completed successfully.

How to verify Angular CLI is installed correctly or not

In the next article, I am going to discuss how to create an angular project using angular CLI step by step. Here, in this article, I try to explain the Angular Environment Setup i.e. the software requirements and how to install the necessary tools and software. I hope you enjoy this article and also understood and setup your Angular Environment for developing angular 2 or higher version applications.

1 thought on “Angular Environment Setup”

Leave a Reply

Your email address will not be published. Required fields are marked *