In Focus

How To Setup Angular 7 Development Environment

In this article, we are going to learn how to set up an Angular 7 application development environment in the Visual Studio code editor. We will create our first Angular 7 application.

Introduction

In this article, we are going to learn how to set up an Angular 7 application development environment in the Visual Studio Code editor. We will create our first Angular 7 application.

Angular is a framework to build client-side and server-side applications.

Prerequisites

  • HTML, CSS, JavaScript and Typescript

 Development Environment

  • Editor- Visual Studio Code
  • Node
  • Npm
  • Angular CLI

Step 1

Download Visual Studio Code from here.

Setting Up Angular 7 Development Environment 

Step 2

Open a browser, type https://nodejs.org/en/download/, and click on the windows installer. It will show LTS and the current version of the node, the user can download the recommended or current version.

Setting Up Angular 7 Development Environment 
 
Setting Up Angular 7 Development Environment 

Step 3

After installing node open Visual Studio integral terminal and type node –v to check installed version of node,

Setting Up Angular 7 Development Environment 

Step 4

Type npm –v to check npm version.

Setting Up Angular 7 Development Environment 

If node –v and npm - v shows their respective versions it means the node is installed successfully.

Step 5

Angular CLI is very important in setting Angular, open https://cli.angular.io/.

Setting Up Angular 7 Development Environment 

Step 6

Open Visual Studio integral terminal command prompt and type npm install –g @angular/cli. It will install Angular CLI globally where g represents globally. To check Angular CLI installed type command ng –v.

Setting Up Angular 7 Development Environment 

Step 7

Create a folder, Angular, on a desktop or your choice. Open Visual code, click on File, select Open Folder (ctrl+O) then click on it.

Setting Up Angular 7 Development Environment 

After clicking on Open Folder a window will appear. Select the created folder and click on Select Folder as shown in the below image.

Setting Up Angular 7 Development Environment 

Step 8

Create the application, click on view, select Integrated Terminal and click on it. It will open a Visual Code Console.

Screenshot 1

Setting Up Angular 7 Development Environment 

For generating and serving an Angular project via a development server create and run a new project:

  • ng new my-project
  • cd my-project
  • ng serve

Step 9

After successfully compiling a project, open browser type http://localhost:4200/ hit enter

Final output

Setting Up Angular 7 Development Environment 

Conclusion

In this article, I have explained the setup development environment of Angular in Visual Code step by step. Hopefully, it will help you to understand.