Angular2- Prerequisites and How to create an application using Visual Studio

Prerequisites and Installation

1) Install Visual Studio.

In this series of Angular2 application development I am using Visual Studio 2015 as code editor. You can use any code editor of your personal choice. There is a free version of Visual Studio available known as Visual Studio Code. Please refer this link to set up visual studio code in your machine.

2) Install NodeJS and NPM

Install NodeJS from https://nodejs.org/en/.  Node and NPM are required for angular development.

Creating a new Angular2 Application

I am going to use Angular CLI to create new angular applications.

1) Create a directory HiveStoreNGApp.  Open command prompt and ‘cd’ in to the directory.

2) Run the below command in command prompt.

The above command will create Angular2 development specific files in the directory, but won’t install any node packages.

3) Now create a new solution in Visual Studio, open visual studio, go to File -> New -> Project.
Go to Templates -> Other Project Types  and select Visual Studio Solutions. Give a name for the solution and select HiveStoreNGApp directory as the location.

4) Now lets add newly created angular app code files to the solution. For this open the solution and right click on the solution -> Add -> Existing Web Site.

5) Browse to the directory where we created new angular app and select ‘Part1-Basic’ folder. The solution structure is as below.

6) Now go the command prompt and install npm packages by running npm install command. This will install all the packages in the node_modules folder. This may take a few minutes.

7) In order to run the application issue ng serve command.

8) Open a browser and browse http://localhost:4200/.  You can see below page if every thing goes well.

9) Now open src -> app -> app.component.ts and edit title value to ‘Hive Store App!’.

Now go the browser, you can see that page is automatically refreshed and title changed to new string.

Leave a Reply

Your email address will not be published. Required fields are marked *