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 and download it there.

Download Node
Download VS Code from the official website according to the version of your operating system.

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

    NPM Install
    Enter the command to install the 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
New Project
Enter the command to create a new Angular project.

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.

    Open Folder
    Click on the Open Folder button.

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

    Select the folder containing your new Angular project.

  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.

    New Project Structure
    The project folder will open in the explorer panel of VS Code.

Step 5: Run the Angular project

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

    NPM Start
    Enter the command to run the angular project.

  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:

    Angular Project
    This is the output of the default Angular project.

Leave a Comment