How to Set Up Angular in Visual Studio Code

Angular is a JavaScript framework for building client-side Angular applications. These are applications that run entirely in the user’s browser. We use HTML and CSS to build the user interface, and write our code in TypeScript, an enhanced version of JavaScript. Typescript is a superscript of JavaScript. That means anything that you can do in JavaScript, you can also do in TypeScript using the exact same syntax. The following guide will help you set up Angular in Visual Studio Code.

Installations

Node Package Manager(NPM)

With NPM, you can install libraries, packages, and applications, along with their dependencies. You’ll need NPM to install all the libraries for Angular. You can install NPM by installing Node from nodejs.org. The NPM package manager comes bundled with it.

Angular CLI

The Agular CLI is a command-line interface that you can use to create a new project, generate code, execute your application, deploy to production and much more. To install Angular CLI, follow the below steps:

  1. Open the command line in your respective operating system:
    Command Prompt on Windows and Linux
    Terminal on Mac OS
  2. Execute the following command:
    npm install -g @angular/cli

    NPM Install
    Enter the following command to install the Angular CLI: npm install -g @angular/cli

Steps to create Angular Project in Visual Studio Code

Creating New Project

  1. Inside the Command Line, type and execute the following command:
    ng new angular-example

    New Project
    Enter the following command to create a new project: ng new angular-example
  2. When prompted with the question – “Would you like to add Angular routing?” Type Y and hit Enter.

    Angular Routing
    Type Y and press Enter.
  3. When prompted with the question – “Which StyleSheet format would you like to use?” Select LESS by down-arrow keys and hit Enter.

    Stylesheet
    Select LESS and press Enter.

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

Opening The Project

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

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

    Open Folder
    Click on the Open Folder button.
  2. Select the folder which we just created. Here, I will choose “angular example.” Then, click on Select Folder.

    Directory
    Select the folder from your preferred directory.
  3. Here’s the project the CLI created for us. You’ll notice that it has created a number of files, including the app folder. This is where you’ll do most of your coding on the Angular project.

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

Running The Project

Do the following to run the project:

  1. From the top-level View menu, choose the Terminal option.

    Terminal
    From the View menu, click on the Terminal option.
  2. Inside the terminal, type and run the following code:
    npm start

    NPM Start
    Enter the following command to run the angular project: npm start
  3. 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.

Debugging Angular

Follow the steps below to debug the Angular project:

  1. From the sidebar, click on the Run and Debug tab and select the create a launch.json file option.

    Run and Debug
    Click on the Run and Debug button.
  2. When prompted to choose the environment, select the Chrome option.

    Select Environment
    Choose Chrome as the environment.
  3. Change the local host from 8080 to 4200 and save the file by pressing Ctrl + S.

    launch.json file
    Change the host to 4200.
  4. Open any file from your project and add a breakpoint by left-clicking in the Editor Margin or pressing F9 on the current line. Breakpoints have red-filled circles.

    breakpoint
    Add a breakpoint in your code.
  5. Inside the “Run and Debug” panel, click on the play button.

    Play button
    Inside the Run and Debug panel, click on the play button.
  6. The debugging session will start. VS Code will switch views to open a new browser window. You’ll notice the debugger hitting your breakpoint.

Was this article helpful?

Leave a Comment