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.

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/.

Angular

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.

Angular

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

Angular

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.

 Angular

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

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.

Angular

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

Angular

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

Angular

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

Angular

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”.

Angular

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.

Angular

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”.

Angular

Angular

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.

Angular

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.

Angular

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.


Similar Articles