How to setup angular2 in visual studio ide How-to-setup-angular2-in-visual-studio-ide.pdf

As a .net developer we always want that we can develop our application in Visual Studio IDE . So in this article our main focus is to add Angular2 with typescript project in VS IDE.

To do that we must have these thing installed in our machine

  • Node.js ( greater than version 4.6.*) and (npm greater than version 3.*.*).

  • Visual Studio 2015 Update 3

  • Install Typescript 2 for VS2015 from link download typescript from here

Note : We need to configure External web tool as mention in the image.

vs-external-tool

Now what we are doing here we add the the demo project provided by Angular team in the IDE and try to run it under IDE. We can download from 

here

.To run an Angular2 without IDE we need two commandnpm install : this install all the required files in the project.npm start : to start the application.When we use Angular2 in IDE we don't need to use these command.Now we have all the dependent things installed so we can start to add Angular2 in VS IDEOpen new project ASP.NET Web Application (.net framework) and make sure the framework is 4.5.2.

open

Select any template, here I have selected Empty template.Now go to the project location and copy the Quick Start project same place where you have your csproj file.

location

Now go to the solution explorer and include these folder or file in the project under Quick Start.

  • app
  • style.css
  • Index.html
  • package.json
  • tsconfig.json
  • IDE can ask for search typescript typings select NO

Now next step is to restore angular packages. For that go to solution explorer and right click on package.json and select restore packages option. If that won't work than this can be done be done by using npm install command.Both the process take time as package take time to install.Now select Index.html as default page and run the application if all steps is taken care of than we have “Hello Angular” message in the browser.    




This article is contributed by Vipin Joshi on Wed Nov 30 2016 21:13:18 GMT+0530 (IST)

If you want to add more comments to the article or you see any thing incorrect please write a comment below and we will surely get back to you.