How to Install Angular 2 using CLI on Windows Machine?

Install Angular 2 using CLI

What is the Angular-cli?

Put simply, it’s a command line interface for Angular, that allows you:

  • Quickly generate a new Angular 2 project.
  • Generate routes, components, services and pipes.
  • Serve your application.
  • Test your application.

In a nutshell, it’s a workhorse that cuts out a lot of the tedious work involved with Angular development. So let’s get started on how to install angular2 with the Angular-cli.

Install Angular 2 step by step using Angular-CLI on Windows machine.

Angular 2 is one framework for mobile and desktop application. This article teaches you how to install Angular-cli on Windows machine. At the end of reading, you will learn how to create Angular 2 project using Angular-cli. The instructions below help you create new Angular 2 project folder, install dependencies, and start a development server. To install on Windows machine please follow the below steps:

1. Install latest version Nodejs

1.Install latest version Nodejs (Node version 6) if you do not already have it on your machine. Right click command prompt and choose run as Administrator. When Nodejs is installed, npm (Node Package Manager) is installed along. To check nodejs version and npm version-:

 

2. Change the environment variable

Change the environment variable to the location where npm is installed on your machine e.g. “C:\Users\myprofile\AppData\Roaming\npm”. Click start button in taskbar and type ‘env’ in search field. Click environment variable. Environment variable dialog box displayed. Click PATH in User variable section and then edit button. Enter ; if not already present and then path e.g. C:\Users\myprofile\AppData\Roaming\npm . Then click ok.
; act as a separator between path variables

 

Change the environment variable

 

3. Install angular-cli as administrator

Install angular-cli as administrator. Right click command prompt application and click run as administrator.

or
g stands for install globally

Open new command prompt and enter : c:/> ng version

If it runs properly and displays angular 2 version. Everything installed fine. Go to step 5 else step 4 if you get “Cannot find “reflect-metadata”.

4. Install reflect-metadata as administrator

Install reflect-metadata as administrator

5. ng version

if your angular cli install successfully it will give you angular version.

6. Start your first Angular2 App

This will take few minutes to initialize and install dependencies

7. Run your FirstAngular2App

Change directory to FirstAngular2App

c:/cd FirstAngular2App>

c:/cd FirstAngular2App> ng serve

This will start your app in your browser, if not start automatically you can start by  entering

http://localhost:42000 to view your app

8. What IDK/Editor you should use?

I recommend you strongly to use Visual Studio code editor to develop your application.  It is developed by Miscrosoft, the guys behind developing Type-script and those working on Angular 2 with Google. This is why it makes sense for Visual Studio code to have great support for Type-script, which is what Angular is built on, right out of the box. Visual Studio code supports syntax and error highlighting and smart autocomplete for TypeScript.

 

 


About Vijay Dhanvai

A passionate blogger by heart and mind, I have been working in this field for 7 years now. A WordPress Professional, web developer and designer who intends to guide his readers about Web Design, WordPress, Blogging, Web Development, and more.

Leave a Reply