How To Setup And Install Angular 13

Introduction

In this article, we are going to discuss how to set up and Install Angular 13 using Angular CLI. This is the second article of the Angular series.

First Article can be found here.

We are going to cover,

  1. Prerequisites
  2. How to install Node.Js?
  3. How to install Node Package Manager (NPM)?
  4. How to install Angular CLI (Command Line Interface)?
  5. How to create the first application?
  6. How to execute Angular application?

Prerequisites 

To work with Angular, we need the below software/packages installed,

  1. Node.js
  2. Node Package Manger (NPM)
  3. Angular CLI (Command Line Interface)

Let’s start.

How to Install Node.js & NPM?

Navigate to the official node.js website here.

How to Setup and Install Angular 13

Click on Downloads link from Menu,

Based on the operating system and processer in your system, download the .msi file and install it. 

How to Setup and Install Angular 13

Node.js and NPM will be installed in your system once installation is complete. 

Execute the below command in the command prompt to check the installed version,

Node -v

Npm -v

How to Install Angular CLI (Command Line Interface)?

We will use the below command to install Angular CLI. 

npm install -g @angular/cli

In the above command ‘-g’ means, it will install globally and be available from anywhere in the system. 

Once CLI installation will be complete, we can use the below command to check the version.

ng --version

We can check the version of Angular CLI, Angular Version, Node, Typescript, rsjx etc versions using the above command.

How to create a new project using CLI?

The below command will be used to create a new Angular project. 

ng new HelloWorld

In the above command “HelloWorld” is the application name.

It will ask two questions, 

  1. Would like to add Angular routing? - I don’t want routing hence enter N.
  2. Which stylesheet do you want to use? - I need CSS

It will take some time to install the required packages.

Once installed, you will see the below screen.

Check in the project folder, all files are created successfully.

Let’s execute this project using Angular CLI,

How to Execute Angular using CLI?

use 'cd' command and select the path of the project folder ,as shown below.

Execute Angular Project,

ng serve

The ng serve command is used to build an application and serve it locally. Server will automatically rebuild the application and reload the page when you change any of the source files through this command.

In the browser, open http://localhost:4200.

How to Setup and Install Angular 13

That’s all for this article. Hope it will help you.