Angular Environment Setup

I am writing this because when I wanted to learn Angular but I had difficulty getting set up, and I didn’t know where to begin. So this is just to try to simplify things for you.  We will see how we can install the prerequisites needed to run our first Angular 7/8 app.

 

We will discuss the environment setup required for Angular 7/8.

 

To install Angular 7/8, we require the following,

• IDE for writing code
• NodeJS
• NPM
• Angular CL

IDE for writing code

 

There are many IDEs that can be used for Angular 7/8 development such as Visual Studio Code and WebStorm. In this, we will use the Visual Studio Code, which is free from Microsoft. VS Code is light and easy to set up, and it has a great range of built-in code editing and formatting features.  It also provides a huge number of extensions that will significantly increase productivity. We can download VS Code from the official site of Visual Studio Code: https://code.visualstudio.com

 

Step 1

 

Follow the installation steps after the download is completed. In the initial screen, click the Next button

 

 

Step 2

 

Follow the installation steps after the download is completed. In the initial screen, click the Next button.

 

 

Step 3

 

Accept the given default settings and click on the Next button

 

 

Step 4

 

Click on the Install button on the next screen

 

 

 

Step 5

 

Finally click on the Finish button to launch the Visual Studio Code.

 

 

To verify the Visual Studio Code is installed, open the command prompt and type the following,

 

command: > code –version or code –v

1.42.1

 

NodeJS

 

Angular 7/8 requires Nodejs. We can download Nodejs from https://nodejs.org/en/, and click on the Windows installer. We can see here both the LTS and the current version of the node from where we can download the recommended version or the current version.

 

Download and install the latest version of Node.js. In our case, it is 12.16.1

 

Step 1

 

Launch the installer and in the initial screen, click the Next button.

 

 

Step 2

 

In the next screen, accept the license agreement and click on the Next button

 

 

Step 3

 

In the next screen, choose the destination folder for the installation and click on the Next button.

 

 

Step 4

 

Choose the components in the next screen and click the Next button.

 

For the default installation, we can accept all the components.

 

 

Step 5

 

In the next screen, click on the Install button

 

 

After installing the node, open the command prompt window and type node -v to verify the installed version of the node.

 

This will help to see the version of nodejs currently installed on our system.

 

node –v

12.16.1

 

Npm (Node Package Manager)

 

Npm (Node Package Manager) is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. Depending on our operating system, install the required package. Once nodejs is installed, npm will also be installed, it is not necessary to install it separately. Type npm -v in the terminal to verify if npm is installed or not. It will display the version of the npm.

 

 >npm –v

 

Angular CLI (Command Line Interface)

 

The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. The Angular CLI is a tool to initialize, develop, scaffold and maintain Angular applications. An Angular CLI project is the foundation for both quick experiments and enterprise solutions.

 

Angular CLI is very important in the setting of Angular, visit the homepage https://cli.angular.io/ of angular to get the reference of the command

 

 

To install Angular cli globally on your system type npm install -g @angular/cli. It installs Angular CLI globally where g is referred to globally.

 

Install Globally

 

npm install -g @angular/cli

OR

npm install -g @angular/cli@latest

 

Install Locally

 

npm install @angular/cli

OR

npm install @angular/cli@latest

 

If we want to make sure we have correctly installed the angular CLI, open the command prompt window and type ng --version. If we can see the cli version as shown below, then installation is complete.

 

To install specific Version (Example: 6.1.1)

 

>npm install -g @angular/[email protected]

 

If we want to uninstall angular-cli which is already installed, run the following command.

 

>npm uninstall -g @angular/cli

 

Then run npm cache clean - it will clean npm cache from app data folder under username.

 

>npm cache clean

 

Then use npm cache verify - It will verify whether the cache is corrupted or not.

 

>npm cache verify

 

Use npm cache verify --force -in order to clean entire cache from system.

 

>npm cache verify –force