How to Set Up Angular in Visual Studio Code

Navigate this page hide

Steps to create Angular Project 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:

Open the command line in your respective operating system:
–Command Prompt on Windows and Linux
–Terminal on Mac OS
Execute the following command:
```
npm install -g @angular/cli
```
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

Inside the Command Line, type and execute the following command:
```
ng new angular-example
```
Enter the following command to create a new project: ng new angular-example
When prompted with the question – “Would you like to add Angular routing?” Type Y and hit Enter.
Type Y and press Enter.
When prompted with the question – “Which StyleSheet format would you like to use?” Select LESS by down-arrow keys and hit Enter.
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:

From the sidebar, select the Explorer tab or press Ctrl + Shift + E. Click on the Open Folder button.
Click on the Open Folder button.
Select the folder which we just created. Here, I will choose “angular example.” Then, click on Select Folder.
Select the folder from your preferred directory.
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.
The project folder will open in the explorer panel of VS Code.

Running The Project

Do the following to run the project:

From the top-level View menu, choose the Terminal option.
From the View menu, click on the Terminal option.
Inside the terminal, type and run the following code:
```
npm start
```
Enter the following command to run the angular project: npm start
The CLI then builds the application, starts a web server, and opens the URL in the default browser, as shown in the image below:
This is the output of the default Angular project.

Debugging Angular

Follow the steps below to debug the Angular project:

From the sidebar, click on the Run and Debug tab and select the create a launch.json file option.
Click on the Run and Debug button.
When prompted to choose the environment, select the Chrome option.
Choose Chrome as the environment.
Change the local host from 8080 to 4200 and save the file by pressing Ctrl + S.
Change the host to 4200.
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.
Add a breakpoint in your code.
Inside the “Run and Debug” panel, click on the play button.
Inside the Run and Debug panel, click on the play button.
The debugging session will start. VS Code will switch views to open a new browser window. You’ll notice the debugger hitting your breakpoint.