How to Setup Angular Environment in Visual Studio?. The Complete Angular Developer Course 2023 [Videos].

In this article, I am going to discuss the Angular Environment Setup in Visual Studio. Please read our previous article where we discussed the Angular Versions and Versioning in detail. There are so many editors available to develop Angular applications. They 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 applications using TypeScript.

Software Requirements to Install Angular:

To install Angular 2 or any higher version in your machine, you require the following things

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

Lets 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.

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.

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 the â€œProjects 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.

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.

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.

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.

Step6: Downloading the QuickStart 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. 

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 QuickStart Files, then you need to copy the required “QuickStart 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 its contents
2. bs-config.json
3. package.json
4. tslint.json

So you just need to copy the above 4 quick start files/folders and then paste into your applications 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.

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

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.

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 Video, we will discuss how to run the application from the 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:AngularDemoAngularDemo” directory.

So I typed CD G:AngularDemoAngularDemo 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.

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 the Typescript compiler is to compile the application and then wait for the changes.

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

The following web page will display in the browser.

Now you may have one doubt. From where it gets the web page and from where it will take the value Hello Angular. Dont worry we will discuss each and everything in detail in our upcoming Videos. 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.

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