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
 
Angular Environment Setup
 
Step 2
 
Follow the installation steps after the download is completed. In the initial screen, click the Next button.
 
Angular Environment Setup
 
Step 3
 
Accept the given default settings and click on the Next button
 
Angular Environment Setup
 
Step 4
 
Click on the Install button on the next screen
 
Angular Environment Setup 
 
Step 5
 
Finally click on the Finish button to launch the Visual Studio Code.
 
Angular Environment Setup
 
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
 
Angular Environment Setup
Step 1
 
Launch the installer and in the initial screen, click the Next button.
 
Angular Environment Setup
 
Step 2
 
In the next screen, accept the license agreement and click on the Next button
 
Angular Environment Setup
 
Step 3
 
In the next screen, choose the destination folder for the installation and click on the Next button.
 
Angular Environment Setup
 
Step 4
 
Choose the components in the next screen and click the Next button.
 
For the default installation, we can accept all the components.
 
Angular Environment Setup
 
Step 5
 
In the next screen, click on the Install button
 
Angular Environment Setup
 
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
 
Angular Environment Setup
 
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/cli@6.1.1
 
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