Starting Angular With Visual Studio Code

Synopsis

Introduction
Install Node.js
Install Visual Studio Code
Angular CLI
First Angular Application
Conclusion

Introduction

This article explains how to start Angular with Visual Studio Code. Using Visual Studio code we can create an Angular project. Please follow the following steps to achieve this.

Install Node.js

Using the below article link we will learn how to install Node.js in a step by step way. We need to follow these steps to get Node.js installed.

Simple Way Of Node.js Installation In a Step By Step Process

Install Visual Studio Code

Visual Studio Code is a lightweight but powerful source code editor which runs on our desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity). We need to download Visual Studio code. Go to https://code.visualstudio.com/.

Now click the “Download for Window” and Save File. It will be downloaded after clicking Save File and it will take afew minutes to download.

Open the corresponding location to which we have downloaded the exe file. Now double click the download visual studio exe.

After double clicking exe the “Open File – Security Warning” window will open and click Run. User Account Control will be opened after clicking run. Now we need to give permission to install visual studio code so click yes. Now the Setup – Visual Studio Code window will be opened and click next.

Now select the “I accept the agreement” option and click next. Select the location to install Visual Studio code and continuously click next, finally click the install button. The installation process will start after clicking the install button, it will take a few minutes to finish the installation. Finally, click finish button, and the Visual Studio installation process is finished.

Angular CLI

Angular CLI is a command line interface or command line tool. Create angular applications faster and with great consistency. We can create components, directives, pipes, and services using CLI. Create TypeScript features like classes, interface, enums etc. CLI is used to create run unit test and End-to-End tests. Create an optimized build for deployment to production. It helps us to improve our productivity. Go to https://cli.angular.io/ link to know more about Angular CLI.

Step 1

Install Angular CLI on our machine. The below command is used to install Angular CLI to the global level. Open the command prompt and enter the below command. It will take more than a few minutes to complete this command.

npm install –g @angular/cli

Step 2

We are going to create a new application in Angular. We need to use the below command to create a new application. Open a command prompt and go to the corresponding location (D or E), type the below command, and enter.

ng new MyFirstAngular

Go to the specified location in our machine, we can see the project folder looks like the below screenshot.

Step 3

The project was created successfully. Now we need to compile the application. Go to our application location using the below command and compile the application. Here our project location is “F:\MyFirstAngular”

ng serve

After running the “ng serve” command we can see the “Compiled successfully” message.

First Angular Application

We have created “MyFirstAngular “ application using Angular CLI. Now open the Visual Studio code. Go to “Open Folder” under “File” menu. Now go to our application location and select our project Folder “MyFirstAngular”.

Now our project is loaded in Visual Studio code. We can see what our First Angular Application folder structures look like in the below screenshot.

We can open the “Integrated Terminal” run the commands in our Visual Studio Editor. Press “Ctrl” (Control) and “~” (tilde). After opening Integrated Terminal runs the command “ng serve”.

After running the “ng serve” command we get the “Compiled successfully” message. Now our application compiles successfully. Now press “F5” to run our application.

Before running the Angular application go to “lanch.json” and change the port number as “4200” because Angular default port is 4200.

Now compile our application using “ng server” and after completing the compilation, run the application using “F5” key and our first application looks like below.

Conclusion

This article explained about how to start our first Angular application using Visual Studio code in a simple way. I hope this article helps those who are newly learning Angular.

3 Comments

Join the conversation! Your thoughts help the community grow.

Rohan Rao7y ago
Hi Vignesh, thanks for this tutorial. It was wonderful. I am new to Visual Studio Code. I want to develop a C# application(as back-end) with Angular as front end. Can you show how is it done?
- Vignesh Mani7y ago
  Could you share your email id?
- Rohan Rao7y ago
  Yes, it is [email protected]