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-:
1 2 3 |
c:/>node -v c:/>npm -v. |
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
3. Install angular-cli as administrator
Install angular-cli as administrator. Right click command prompt application and click run as administrator.
1 |
npm install -g @angular/cli |
1 |
npm install -g @angular/cli@latest |
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
1 |
npm install -g reflect-metadata |
5. ng version
if your angular cli install successfully it will give you angular version.
1 |
ng version |
6. Start your first Angular2 App
1 |
ng new FirstAngular2App |
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.
[paypal-donation]