How to Install Angular on Windows

Angular is an open-source, front-end web application development framework, it is TypeScript-based and led by the Angular Team at Google and by a community of individuals and corporations.

In this document, we will cover installation procedure of angular on windows 10 operating system

Prerequisites
This guide assumes that you are using Windows 10. Before you begin, you should have a user account with installation privileges and should have unrestricted access to all mentioned web sites in this document.

Audience:
This document can be referred by anyone who wants to install latest nodejs on windows 10

System requirements
Windows 10 OS
4 GB RAM
10 GB free space
Installation Procedure
To install angular cli we need nodejs and npm. First let’s understand what these are and why we need them.

What is Nodejs and Why you need for angular development?
Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to develop wide variety of applications like network applications, command line tools, web api, web applications. You need nodejs for dev tooling (like local web server with live reloading features) and dev experience, you do not need nodejs to run react in production.

What is npm and Why you need for angular development?
Npm stands for node package manager, it is a dependency management tool for javascript applications. This tool will help to install the libraries and other tools to support angular development.

Let’s start with nodejs installation post completion on nodejs we will install angular cli and create new angular project

1.Download nodejs
1.Visit nodejs download page here

2.Click on windows Installer to download the latest version of node installer.

2.Install nodejs
1.Click on the downloaded node-vxx.xx.xx.msi ( for example node-v10.15.0.msi) in previous step to start the installation which brings up below screen. Please click Next

2.By clicking next in previous step you will be asked to accept license, please accept by clicking checkbox and click Next

3.Click Next

4.Click Next

5.Click Install, this may need elevated permissions provided necessary rights requested

6.Click Finish

3.Testing Installation
Open command prompt and run below command to test node
node -v
You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your node version is > v10.0.0)

Open command prompt and run below command to test npm
npm -v
You should see an output like below (Note: Your version may vary depending on your date of installing as nodejs team make an aggressive release but make sure your npm version is >5 )

Install angular cli
Setting up productive angular development environment would need to configure tools like typescript, webpack and other angular dependencies which are complex to configure for a newbie in angular world. There are several tools that help to alleviate this problem out of which angular cli is the easiest and finest tool with production grade configurations pre-built. Angular cli comes with wide range of commands that help manage the angular development, testing and build process

We will install angular cli using npm. On terminal run the install command shown below

npm install -g @angular/cli

On successful installation you should see the output like above (note your angular/cli version may be different by the time you run this install command)

Test @angular/cli
To test the @angular/cli run ng version command

Congratulations, you have successfully installed @angular/cli

Running the first Hello World application
Create angular application using ng new command as shown below

This command creates a new folder named hello-angular and creates all the files and setups the necessary libraries within this folder and makes the angular project ready to be executed without any additional configuration

2.Once project is created change into project directory and run application using ng serve command as shown below

ng serve -o command starts webpack development server which in turn performs all the build process and opens a browser window and loads application url which runs at by default.

On successful execution you should see the below output in browser