Angular 2 Environment Setup in Visual Studio

Angular 2 Environment Setup in Visual Studio

In this article, I will discuss the Angular 2 Environment Setup in Visual Studio. Please read our previous article before proceeding to this article where we discussed the Introduction to Angular 2 application. There are so many editors available to develop Angular applications are as follows but for this course, we are going to use the Visual Studio as our editor.

  1. Visual Studio Code
  2. Eclipse
  3. WebStorm
  4. Atom
  5. Sublime Text, etc.

Note: You can use any of your favorite editors to build Angular 2 applications using TypeScript.

To install Angular 2, we require the following things

  1. Nodejs
  2. Npm
  3. Angular CLI
  4. IDE for writing your code (Visual Studio)

Let’s understand the step by step procedure for the Angular 2 Environment Setup in Visual Studio 2015.

Step1: Install Node.js and nmp

The first and the most important step for you is to install the Node.js and npm in your machine. The angular organization recommended that you should have node.js installed in your machine with version 4.6.x or greater and npm version should be greater than or equals to 3.x.x. In order to check the node and npm version that is installed on your computer, you need to type node -v and npm –v in the command prompt.

To do so, open the command prompt in administrator mode and type the command as shown in the below image. As you can see I have already installed the node.js and npm, so it gives me the result as shown below.

Angular Environment Setup in Visual Studio

If you have not installed node.js in your machine then just go to the following website and download the latest version of Node.js.

https://nodejs.org/en/download/

Based on your operating system, download the correct installer. For example, if you have Windows 64 bit Operating system, then you need to download the 64 – bit windows installer.

Step2: Install Visual Studio 2015 with Update 3

In this step, you need to set the Visual Studio 2015 to develop Angular 2 applications. To do this you need to make sure that Visual Studio 2015 installed in your machine with Update 3. In order to check the Visual Studio version, you need to click on the “Help” menu option and then you need to select the “About Microsoft Visual Studio” option which will open the following popup.

Angular Environment Setup in Visual Studio

If you have not installed the Update 3 for Visual Studio, then you can download the Visual Studio Update 3 from the below links based on your Visual studio type.

Visual Studio 2015 Enterprise – Update 3

Visual Studio 2015 Professional – Update 3

Visual Studio 2015 Community – Update 3

Step3: 

In this step, we are going to configure the environment settings in Visual Studio for node and npm. To do this, click on the “Tools – Options” in Visual Studio, which will open the Options window.

From this window, expand theProjects and Solutions” tab and then select the “External Web Tools” tab and then put the directory in the order as shown in the below image.

Angular Environment Setup in Visual Studio

This is required because it will tell the Visual Studio, first look for the external tools (like npm) in the global path, if it is not found there then only look for the internal path. Then Click on the “OK” button which will close the “Options” window. In order to take this effect, you need to restart the Visual Studio.

Step4:  Installing TypeScript

In this step we are are going to Install the TypeScript which will be our language. And here we need to install the TypeScript whose version should be greater than or equals to 2.2.0. If you want to verify the TypeScript version that is installed on your machine, then you need to click on the “Help” menu from Visual Studio and then you need to select the “About Microsoft Visual Studio” option which will open the following window.

Angular Environment Setup in Visual Studio

If you have not installed Typescript on your machine or if you have installed a lower version of Typescript (< 2.2.0) then please go the following website and then download and install the latest version of Typescript.

https://www.microsoft.com/en-us/download/details.aspx?id=48593

Step5: Creating an Empty Web Application using Visual Studio

In this step, we are going to create an Empty Web Application using visual studio. To do this open Visual Studio in Administrator mode. Then click on the File – New Project option from the context menu which will open the new project window. 

From that window select “Visual C#” from the left pane which is under the Installed template section. From the middle pane select the “ASP.NET Web Application” as the project type. Provide a meaningful name for your application such as “AngularDemo” and finally click on the OK as shown in the below image.

Creating Angular 2 application in Visual Studio

Once you click on the OK button, it will open the select project template window. From that window, you need to select the “Empty” template as we are going to do everything from scratch. Then click the “OK” button as shown in the image below.

Angular Environment Setup in Visual Studio

Step6: Downloading the Quick Start Files

In this step, you need to download the Angular “Quick Start Files” which required to run Angular 2 application. To download the necessary files please visit the following GitHub website. 

https://github.com/angular/quickstart

Once you download quick start files, then you need to extract the contents as the download file is a ZIP folder.

Step7: Using the Quick Start Files in Visual Studio

Once you have the Angular Quick Start Files, then you need to copy the required “Quick Start files” into your angular 2 web application project. The point that you need to remember, here we do not require all the quick start files. The following four quick start files and folders we are going to use at this moment.

  1. src folder and it’s contents
  2. bs-config.json
  3. package.json
  4. tslint.json

Angular Environment Setup in Visual Studio

So you just need to copy the above 4 quick start files/folders and then paste into your application’s root directory. Once you copy and paste the above quick start files/folders, then you need to click on the “Show All File” icon from the “Solution Explorer” which will show all the files and then you need to include all the copied quick start files/folders which are present inside the “src” folder of your project.

If you are getting a prompt with the message “Search for Typescript Typings” while including the quick start file then simply click on the “No” button as shown in the below image.

Angular Environment Setup in Visual Studio

At this moment, the project structure should be as shown in the below image. 

Angular Environment Setup in Visual Studio

Step8: Restore the Required packages

To do so, right click on the “package.json” file in the “Solution Explorer” and then simply select the “Restore Packages” option. It will take some time to load all the required modules and packages which are required and necessary to run the angular 2 applications. Once the package restoration is completed then you can verify all the installed node modules by clicking on the show all files icon from the solution explorer. The point that you need to keep in mind is you should not include the node_modules folder into your application.

NOTE: If you do not find the Restore Packages option when you right-click on the package.json file, then just click the “Run Web Code Analysis” option of the package.json file then you will see the Restore Packages option.

Once the Restore packages are completed, the following is the folder and file structure of our AngularDemo project.

Angular 2 Environment Setup in Visual Studio

Step9: Run your Angular 2 application

In this step, we are going to run the angular 2 application from the command prompt. In our next article, we will discuss how to run the application from visual studio using F5 or Ctrl F5.

In order to run the angular 2 application using the command prompt, first, you need to open the command prompt in administrator mode. Then you need to change the directory to the location where you have created your project. I have created the angular application in “G:\AngularDemo\AngularDemo” directory.

So I typed CD G:\AngularDemo\AngularDemo in the command prompt and then press the enter key which will take me to the root folder. Then you need to type “npm start” and finally press the “Enter” key as shown in the below image.

Angular Environment Setup in Visual Studio

Once you click on the Enter key it will do the following things.

First, it will launch the TypeScript compiler which is tsc. The job of Typescript compiler is to compile the application and then wait for the changes.

Then will start the lite-server where it will host the application and finally launches the browser.

Angular Environment Setup in Visual Studio

The following web page will display in the browser.

Angular Environment Setup in Visual Studio

Now you may have one doubt. From where it gets the web page and from where it will take the value Hello Angular. Don’t worry we will discuss each and everything in details in our upcoming articles. For now, just open the “app.component.ts” file from your project “Solution Explorer“. You can find this file within the “app” folder which is present inside the “src” folder of your project. Then change the “name” property value to “Angular 2 Demo” as shown in the below image.

Angular 2 Environment Setup in Visual Studio

Once you save the changes, then you will find the changes automatically reflected on your web page as shown in the below image.

Angular Environment Setup in Visual Studio

In the next article, I will discuss how to run the angular application using F5 or CTRL F5 in Visual Studio. 

SUMMARY:

In this article, I try to explain Angular 2 Environment Setup in Visual Studio step by step with one example. I hope this article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.

1 thought on “Angular 2 Environment Setup in Visual Studio”

Leave a Reply

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