Build Or Set Up Your First Angular App With Visual Studio Code

In this article, we will learn how to set up an environment for building your first Angular app (with Visual Studio Code). I also recommend reading my articles about TypeScript.

• Getting started with TypeScript
• Working with Types in TypeScript

Let’s Start.

Go to https://nodejs.org/en/download/ and download Node.js (which is a JavaScript runtime built on Chrome’s V8 runtime engine).

 

After downloading and installing, you can check the version of Node and Node Package Manager using these commands.

 

 

Now, open CMD prompt in order to install TypeScript. We will use NPM (Node Package Manager) to install TypeScript.

 

npm install -g typescript

In the above command, -g denotes the stable version of the TypeScript. After successful installation, run the below command to confirm the version.

 

Let’s install Angular CLI. The Angular CLI is a command line interface tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

 

 

Run the below command in order to install Angular CLI.

 

 

You can also check the version of Angular CLI using the below command in command prompt/terminal.

 

 

Let’s create a new project and download the skeleton application by using the following command.

 

 

Wait for a few minutes for setting up a new project and installing the npm packages. Once the download is completed, you will get a success message in command prompt.

 

 

For demonstration purposes, I am going to use Visual Studio Code Editor. You can also download it from https://code.visualstudio.com/.

 

 

Run the Visual Studio Code.

 

 

Now, click on the Explorer icon on the right side palette and click on "Open Folder".

 

 

Select the location where you created your first Angular app using Angular CLI.

 

 

Click on View >> Integrated Terminal.

 

 

Now, run this command by which the NG live development server will start and –open will open the browser immediately after the server starts.

 

ng server –open

 

 

Finally, we launched our first Angular app.

 

 

So, let’s make some changes in the project. Open app.component.ts file and change the title property’s value.

 

 

Once you save the application, you will see the changes applied to the server as ng server watches your files and rebuilds the app upon finding any change in the file.

 

 

I hope you like it.