Step By Step Creation Of Angular Project With TypeScript Using Visual Studio 2015

Introduction

In this article, we will learn how easily we can create an Angular v2 project using Visual Studio 2015.

Installation Process

Step 1 Install Visual Studio 2015 Update 3

Link

Once you have installed the Visual Studio, you can verify your version installed like below.

Open Visual Studio from "Start" menu and go to the Help menu. Click "About Microsoft Visual Studio".

Here is the version details of your Visual Studio.



Step 2 Install and configure Node.js and npm

Link

Sample screenshots for Node installation.



After clicking some of the screens, finally, you will get the Finish screen; just click "Finish".

That’s it. Now, Node is installed successfully. We can go and verify in the normal command prompt by entering these two commands,

1. Node –v
2. Npm –v

You will get a version of that, like in the below screenshot.



Now, let’s configure Node inside Visual Studio. For that, open Visual Studio and click on Tools -> Options.

In the "Options" window, expand "Projects and Solutions" and select "External Web Tools".

In the right pane, move the global $(PATH) entry to be above the internal path $(DevEnvDir) entries. This tells Visual Studio to look for external tools (like npm) in the global path before the internal path.



Click "OK" to close the "Options" window and then restart Visual Studio for the changes to take effect.

Step 3 Install TypeScript for Visual Studio 2015

Typescript for Visual Studio 2015

Quick note

By default, when you install VS 2015 update 3, you will get the lower version of TypeScript, but to develop the Angular application, you need at least version 2.2.2.0. To see the TypeScript version in your system, go to Help->About Microsoft Visual Studio.

Give below is the default TypeScript version installed on my machine.

Before installing TypeScript.

So, we will install a higher version now. I hope you downloaded the TypeScript from the link provided in the above.

Now, run typescript.exe and click "Install".

Very Important note

Once installed, TypeScript will ask for a restart of your system. So, save all your important files and click "Restart".

Now, if you go and check the Help section of the Visual Studio again, it should have the updated TS version.

Let’s verify.

Now, let's proceed to the next step.

Step 4 Create an empty ASP.NET Web Application project

Go to Visual Studio and click File > New > Project.

Next, click Web under Visual C# on the left pane, choose ASP.NET Web Application from the right pane, and name your project as per your wish. Finally, click OK.

Once created, you will see this folder structure like below screenshot by default in the right side Solution Explorer.

Step 5 From the “Quick Start Files" Copy the required "Starter files" to our project

In this step, we need to get the official Angular startup files and copy to our project

Link - https://github.com/angular/quickstart

After downloading and extracting the files, we need to copy the required files and folder to the project. Instead of copying all files, we can just copy four files and a folder to our project, as mentioned below.

Copy the above files/folders and paste them in the root directory of "MyFirstAngularProject" web application project. Now, click "Show All File" icon in "Solution Explorer" and include all the copied files/folders in the project.



Step 6 Restore the required packages.

To do that, in the "Solution Explorer", right click on "package.json" file and select "Restore Packages" from the context menu.

To see all the installed Node modules, click on "Show all Files" icon in Solution Explorer.

Important Note

DO NOT include "node_modules" folder in the project ever. It may create a problem.

That’s it. we have almost done everything. Now, we shall see our existed first output using command prompt.

Step 7 Run the project Using Command Prompt

• For that, open your normal command prompt from the Start menu and change the directory in the command prompt to the directory where you have the web application project.
• I have my web application project in"D:\MyFirstAngularProject\MyFirstAngularProject".
• So I have typedCD D:\MyFirstAngularProject\MyFirstAngularProjectand pressed enter. You provide your path accordingly
• And then, type “npm start” and press "Enter".
  
  
  

That’s it; it will automatically open the browser and we will finally get our first Output…

Additional Note

If you want to change the above Angular default display message, just go the src->app->app.component.ts file and change the text like in the below SnagIt.

It will automatically change our output in the browser window like below:

Congralutions, you have successfully created your first Angular project by yourself.

Hope, the above article was helpful. Kindly, let me know your thoughts or feedbacks. If you like to explore Angular concepts more, here are the links,

• Beginners-guide-for-angular-module
• Angular-component-with-examples
• Angular-directives-with-examples
• Angular Data Binding with examples
• Angular-pipes-with-examples