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

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