Starting a project on Visual Studio 2015 for Angular2

Question

I used stackoverflow extesively to figure out how to get Angular2 working in Visual Studio 2015 pro. No real answers but here is what I found that worked. I have seen a bunch and I mean a bunch of instructions and examples for how to get Visual Studio 2015 Pro working with an Angular2 project. Now this gets a little confusing with all the instructions using Visual Studio Community or use any other editor. Here is what I have found using my own experimenting and also the beginning of a good book on the subject "Angular 2 Development with Typescript" by Yakov Fain and Anton Moiseev. Available from Manning publications. Anyway here is my basic setup for a project.

First install Nodejs, this is so you can use it for your package manager. Don't mess with doing it through NuGet, just install the Windows install package from the website. Also I did try another pakcage manager but I think Node has the latest packages. Next you can run npm init and it will create a default package.json file. Afterwards edit it and make it look more or less like the following:

{ 
  "name": "helloworld", 
  "version": "1.0.0", 
  "description": "test npm setup", 
  "main": "main.ts", 
  "scripts": { 
    "start": "live-server" 
  }, 
  "author": "name", 
  "license": "ISC", 
    "dependencies": { 
"angular2": "2.0.0-beta.0", 
"es6-promise": "^3.0.2", 
"es6-shim": "^0.33.3", 
"reflect-metadata": "0.1.2", 
"rxjs": "5.0.0-beta.0", 
"systemjs": "0.19.8", 
"zone.js": "0.5.10" 
}, 
"devDependencies": { 
"live-server": "^0.8.2", 
"typescript": "1.7.5" 
} 
} 

Now that you have the package.json file, next is to get a command prompt in your project directory and type the following:

Npm install

This will create a node_modules folder which will have all of the packages available for angular2.

Next you need to go to the project/properties/TypeScript Build section and click on "CommonJS" in Module System section of the page. Next you need to right click on the project and unload it, the right click and edit. Look for the following section:

<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> 

Down near the bottom of that section add the next two lines:

<TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata> 
 <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators> 

OK we are almost done. You need to walk down the node_modules folder and find:

/node_modules/typescript/lib/typescript.d.ts

And include this in your project by right clicking on it and selecting include in project. I think there are some changes in this that make the VS install of typescript work with Angular2, not enough of an expert to know just know after a ton of trial an error that is the main key. Now I also because I do not like to see red squigles, go in to the Index.html or what ever you call your boot html page and find each of my include sources and include them, not essential just less irritating. Here are the includes I have to a basic app:

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> 
    <script src="node_modules/typescript/lib/typescript.js"></script> 
    <script src="node_modules/systemjs/dist/system.src.js"></script> 
    <script src="node_modules/rxjs/bundles/Rx.js"></script> 
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

I can not believe how many hours I spent getting to this conclusion. I read multiple different and sometimes conflicting ways to make this work. I hope this helps a fellow newbie get over the hump!

Answer 1

@M.Gamble - Assuming that your using ASP.NET Core web apps to run Angular 2 using VS 2015 then follow this link http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

If your looking for ASP.NET MVC 5, then go through comments section of above link. They might help you.

Answer 2

After some recent experimentation, I found that if you add a tsconfig.json file to the root of the project you can avoid setting the keys in the project file. If Visual Studio 2015 finds a tsconfig file it will use that and gray out the normal TypeScript Build section of the properties. One caveat if you add one after you start your project you might have to exit the project and even restart VS.