22 July 2017 Sudhanshu Ranjan 517

How to setup angular 2 environment and build a project

Hello Guys, It may be very important for you. today I’m going to tell you how you will start the new application in angular 2. Before you start coding with Angular 2, you need to get the following key components installed in computer.

  1. npm Installation
  2. Visual Studio Code Installation
  3. Angular CLI

Now you can follow the step of installation and how to create and run application in angular2.

npm Installation

Step 1-  For npm installation first you have to go Node.js official website and can download (http://nodejs.org/en/download) the installer. You should have to choose installer here as per your system.

Image

Step 2- After download the installer, run the installer as per screen.

Step 3 - After that you can click on checkbox and accept license and agreement and go next.

Step 4 - After that you can choose the destination folder for the installation or leave it for default and click next.

Step 5 - You should install all features component here and click next.

Step 6 - after that click on next for installation.

Step 7 - Now Installing the application.

Step 8 – Now installation successfully completed.

 

Visual Studio Code Installation

Step 1 – For visual studio code installation you have to go official site https://code.visualstudio.com/
And download the installer.


Step 2 – After download the installer, run the installer and follow the next step.


Step 3 – After that you can click on checkbox and accept license and agreement and go next.


Step 4 – After that you can choose the destination folder for the installation or leave it for default and click next.

Step 5 – After that Select Start menu folder.

Step 6 – Select additional task and Click next.

Step 7 – Now setup is ready for installation click on install.

Step 8 – Installation is in progress.


Step 9 – In the final screen, Setup installed successfully and click the Finish button to launch Visual Studio Code.

Angular CLI -


There is so many way to configure/create the angular 2 application. I am going through angular CLI.
After successful Installation of Node.js (npm) and Visual source code follow the next step.


Step 1  – Open command prompt and run the following command.
npm install -g @angular/cli

Step 2 – all angular 2 package will be added successfully.

Step 3 – Then create a new application using following command.
ng new PROJECT-NAME

Step 4 – After project successfully created run following command.
cd PROJECT-NAME

Step 5 – Now go to Visual Studio Code and open this project. Once you will open the project you will see the following screen. Go to the folder  src → app → app.component.ts.  Here I have assign in “title” section which title is used by src → app → app.component.html.

 

Step 6 – Now I have added simple message here and have to deploy the application. So you have to go in command prompt and run the following command to deploy the angular 2 application.
ng serve

Step 7 – After run the command you will see some URL Open your browser on http://localhost:4200/. Open your browser and run the following URL and see the angular 2 application running.

So now what are you thinking. You have run the first angular 2 application. Enjoy !!

If you have any queries feel free to comment or ask.
Please share with your friends...!
Thank You!

You can share at :

About Author
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Know More
Connect with him on Facebook | Google+ | LinkedIn | Twitter

Recommended Post

Leave a comment

About Dotnet Cube

It's my blog - Dotnet Cube, where you will learn and get solutions about programming, web designing and development. I started this website to share my knowledge and experience which might help someone.

You can get more details about me and my blog at About Us page.

Subscribe Newsletter

Subscribe to our monthly newsletter to get the latest industry news, Media Group updates and our current specials.

Follow On Us...

Home | About | Advertise | Copyrights | Privacy | Contact | Admin

Copyrights © 2015-2017 dotnetcube.com. All rights reserved