How to run Angular in Visual Studio Code (VSCode)

How To Run Angular in VSCode

Angular is not the easiest of frameworks to generally write JavaScript apps on (Compared to React, for example.) It’s just not as intuitive, and there is a lot to learn before you can make your first “Hello World” app in Angular. But it’s equally as easy to install and launch apps on from command line. If you’re new to Angular and want to make your first Angular app this tutorial is for you!

You don’t actually run Angular in VSCode. Just edit it. Wait. What?

Angular is executed in NodeJS - a JavaScript environment.

It’s part of your local web development environment.

This is what allows you to run Angular on localhost in your browser.

Every time you edit Angular in VSCode, it will automatically reload in the browser, and this is called “hot reload”. But it doesn’t run in VSCode itself.

This means first you need to install Node. (go to NodeJS)

And for those who don’t like to read, here’s a video tutorial:

How to run Angular in VSCode

When installing Node JS to run Angular, pick a simple to remember location like C:\nodejs (instead of Program Files) This will really pay off later just in case you need to use NodeJS with a simple and short path.

Installing NodeJS, by rewriting default location to c:\nodejs in this example.

Now that Node JS is installed, go to Start button:

And start typing: environment variables:

The easiest way to find Environment Variables on Windows (Go to Start button, and type “environment variables”, then click on the Open button in the right panel, or hit Enter.)

On the window that shows up, click Environment Variables button:

Click on Environment Variables button.

On next screen, find Path variable (in second box):

Find Path variable in second box under System variables.

Now click on New button, and type c:\nodejs (or the path where you installed NodeJS in previous step.)

How to add Node JS to PATH environment variables in Windows.

Click on Start button again, and type cmd or cmd.exe and hit Enter.

Now run command line in Windows (Go to Start, type cmd.exe, hit Enter.)

In the command line prompt, type:

node --version

Check which version of NodeJS I am running in Window command line (cmd.exe)

On my computer it printed out v16.17.1 but yours should be most recent version of NodeJS. (Or whatever you installed in previous step.)

Go to Terminal tab, then go to New Terminal in VSCode. This will open command line in Visual Studio Code.

Create and navigate to location on your hard drive where you created your Angular project.

On the command line, use cd command to navigate to the directory where you want any of your Angular projects to be located. (Just a general use folder for all of your Angular programs, not specific project folder.)

The command to install angular in a folder is npm install -g @angular/cli

The command to install Angular in a folder is:

npm install -g @angular/cli

This command will install Angular server in that directory.

How to create and name a new Angular project in a folder.

Now type ng new projectName on command line:

ng new YoutubeAngular

Here YoutubeAngular can be anything you want. This is your Angular project name. Replace it with your own folder name. This command will create a new Angular application in the specified folder.

Now in any Terminal or command line prompt, type:

cd YoutubeAngular

(Replace with your own project name.)

CD to your Angular project folder and run ng serve. That’s all. Your Angular app should now be running live on localhost:4200 in your browser (just open your browser to verify this.)

And finally launch your app on Angular server by typing ng serve:

ng serve is the command that will launch your Angular application. Once its setup, simply open your browser at localhost:

Running your first Angular app on localhost:4200

Note that your app will launch on port 4200 on localhost:4200.

(This is the default port Angular will use to run your app.)

And here is the video again, just in case you prefer visual instructions:

Set up your Angular to run in Visual Studio Code editor

Video Chapters:

00:00 How to run Angular in VSCode (Intro)
00:13 First, download NodeJS
00:30 Installing Node JS
00:41 Adding Node.JS to Environment Variables (PATH)
01:32 Open Visual Studio Code editor
01:48 Check node version in vscode terminal (and npm version)
02:03 Run “npm install -g @angular/cli” in VSCode terminal to install Angular CLI
02:20 First attempt at creating angular app in PowerShell (SecurityError, UnauthorizedAccess)
02:55 Second attempt at creating angular app in Bash
03:29 Run Angular server by typing “ng serve”
03:53 Open Angular in browser on localhost:4200
04:06 Opening your Angular app in VSCode for editing

But Wait — Get Octopack! (PDF Coding Book Bundle)

Support my free coding tutorials — buy #Octopack coding book bundle.

This special discount offer is valid only for my Medium readers. Don’t miss the opp! This is saving $100’s on quality coding material!