22 July 2017 Sudhanshu Ranjan 1.54k
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.
- npm Installation
- Visual Studio Code Installation
- Angular CLI
Now you can follow the step of installation and how to create and run application in angular2.
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.
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.
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.
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...!
Sudhanshu Kumar Ranjan | Lead Engineer at HCL Technologies | Expertise in Microsoft Technology | Author | Blogger | Programmer
Connect with him on Facebook | Google+ | LinkedIn | Twitter
- Bind the dropdown using angularjs in mvc application
- What is Angular 2 and how it is different from Angularjs 1
- What is Prime Number? Print Prime Number using C#
- Factorial Number Program in C#
- What is AngularJs?
- What is static Constructor? Explain.
- Redirect URL non-www to www using web.config in MVC ASP.Net
- AutoComplete Textbox in ASP.net MVC using Jquery.
- Autocomplete textbox with multi value selected in MVC using JQuery
- What is the difference between UNION and UNION ALL?
Leave a comment
Search In This Website
- TypeError: $(...).autocomplete is not a function
- Paging in MVC using C# with razor
- How to use CKEditor in MVC application/ Asp.net application.
- Bind dropdown in MVC using jquery with C#
- How to implement CAPTCHA in MVC 4 using C# Asp.net.
- set default page while using “Area” in MVC application
- Create and consume a simple WCF Restful service using AngularJs application
- datepicker textbox in mvc 4 using JQuery
- How to install asp.net mvc 5 in visual studio 2012
- Bind gridview and paging example in angularjs
- Sql Server(9)
- Entity Framework(3)
- Angular Js(7)
- Web API(0)
- Web Service(1)
- Crystal Report(0)
- My SQL(5)
- Visual Studio(18)
- Knockout JS(0)
- Microsoft Office(0)
- Node JS(0)