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 the first angular app (with Visual Studio Code). I also recommend to read my article written on Typescript:

• Getting started with TypeScript
• Working with Types in Typescript

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

After downloading, install Nodejs. After installing you can check the version of Node and Node packet 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 above command -g denotes the stable version of the typescript. After successful installation, run the below command to confirm the version of the typescript.

Let’s install Angular CLI i.e. command line interface. 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 installed in your system by 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 npm packages. Once the download is completed, you will get a success message in command prompt.

For demonstration, 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 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 menu bar and select Integrated Terminal.

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

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 on founding any change in the file.

Hope you like it.