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

Angular

Here is the version details of your Visual Studio.

Angular


Step 2 Install and configure Node.js and npm

Link

Sample screenshots for Node installation.

Angular

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

Angular

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.

Angular

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

Angular

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

Angular

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.

Angular

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.

Angular

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

Angular

Very Important note

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

Angular

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

 Let’s verify.

Angular

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.

Angular

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.

Angular

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

Angular

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. 

Angular

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.

Angular

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.

Angular

Angular

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

Angular

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

    Angular

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

Angular

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.

Angular

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

Angular

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,