How to Run AngularJS in Visual Studio Code

Angular is a JavaScript framework for building client-side applications. These are applications that run entirely in the user’s browser.

In coding, we typically use HTML and CSS to build the user interface and write our code in TypeScript, an enhanced version of JavaScript. TypeScript is the programming language we use when building Angular applications.

This guide shows you how to run an Angular project in VS Code.

Step 1: Download NodeJS

The first step is to have a Node running on your system. For this, we need to download the NPM package manager, with which Node comes bundled. You can visit nodejs.org and download it there.

Step 2: Install Angular CLI

The Agular CLI is a command-line interface that we can use to create a new project. It is complete with web-pack configurations and tools for packaging your app for production. To install Angular CLI, follow the steps below:

1. Open your computer’s terminal – in my case, Command Prompt.
2. Type and run the following code:
   npm install -g @angular/cli

   

Step 3: Create a new Angular Project

Now, we can create our new Angular project. Inside your terminal, run the following code:

ng new angular-example

The above command will create a folder or project named “angular-example” on the Desktop.

Step 4: Open the new project in VS Code

Now that we’ve created our Angular project let’s open it in VS Code. Follow the steps below:

1. From the sidebar, select the Explorer tab or press Ctrl + Shift + E. Then, click on Open Folder.

   

2. Select the folder containing our Angular project. In my case, it will be “angular-example.” Then, click on Select Folder.

   

3. The project the CLI is created for us. You’ll notice that it has created multiple files and folders, including the app folder. This is where you’ll do most of your coding in an Angular project.

   

Step 5: Run the Angular project

1. Inside your terminal, run the following code:
   npm start

   

2. The CLI then builds the application, starts a web server, and opens the URL in the default browser, as shown in the image below: