Angular 2 – Environment Setup

Before start working with Angular 2 Project, you need to install and setting up few components, that are necessary and helpful.  We are using Angular CLI for project setup,  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 angular 2 with the Angular-cli

Angular 2 Project/Environment Setup,  step by step using Angular-CLI 

1. Node Package Manager(NPM):

Node Package Manager(NPM) is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js.  Angular has many dependencies on other components. And npm is used to download these dependencies and attach them to your project.

Install latest version Node.js from its officially website  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. Install 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.

or

g stands for install globally

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

3. Start your first Angular2 App

Create your first Angular a application using ng new command.

4. Run your Angular2 Application

Now go to project  directory to FirstAngular2App and run ng serve command to run application.

after few seconds you can view your applicaion run on http://localhost:4200 in browser. 

 5. Visual Code Editor

I recommend you strongly to use Visual Studio code editor to develop your application.  It is developed by Microsoft, 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 Type Script.

6. GIT(Optional) :

If you are working on Git repository in your project you can use it, otherwise it’s optional. you can even use as a default command shell editor.