I've had some issues at the beginning too, but they're mostly easy to fix.

TsConfig equivalent

First, the project setup:

<TypeScriptToolsVersion>1.7.6</TypeScriptToolsVersion><TypeScriptModuleKind>system</TypeScriptModuleKind><TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators><TypeScriptEmitDecoratorMetadata>true</TypeScriptEmitDecoratorMetadata><TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --experimentalDecorators </TypeScriptAdditionalFlags><TypeScriptAdditionalFlags> $(TypeScriptAdditionalFlags) --emitDecoratorMetadata </TypeScriptAdditionalFlags>

System module is right, but check that it's properly included in your html file. You can also pick it in your project options window.

Depending on your VS version, you need to specify the flags in additional flags (older versions) or in the dedicated tags. You still need to check sourcemaps and es target version in your project options (es5 is EcmaScript 5 in EcmaScript version, obviously).

Don't forget to install the latest TypeScript version, otherwise RxJs won't work.

Angular2 files

While downloading angular2 via npm makes sense, I wouldn't include node_modules directly in your typescript folder. Including the whole folder means taking every other node module along, like gulp for instance. Instead, you can simply copy the whole angular2 folder in your typescript directory, in the Content folder (you can do this automatically with gulp or a simple bat file if you want).

About the typescript errors, the issue is that Visual Studio will try to analyze all files in your angular2 folders, and some of those files are duplicated. You need to remove the sources and keep only the compiled js files and the type definitions. That means:

• remove /es6 (they're the files used to develop in es6 instead of typescript)
• remove /ts (the source files)
• remove bundles/typings (additionnal defintion files for es6-shim and jasmine)

You need the rxjs folder at the same folder level as angular2, otherwise the includes won't work, ie :

Content      typings          angular2          rxjs          mymodule           whatever.ts        boot.ts

In your html files, you can link the js files in the bundle folders of both angular2 and rxjs.

<script src="https://code.angularjs.org/tools/system.js"></script><script src="/content/typings/angular2/bundles/angular2-polyfills.js"></script><script src="/content/typings/rxjs/bundles/Rx.min.js"></script><script src="/content/typings/angular2/bundles/angular2.dev.js"></script><script src="/content/typings/angular2/bundles/router.dev.js"></script>

Then your imports will look like this :

import { Component } from 'angular2/core';

System configuration

To make the imports work, you need to configure System. The configuration is fairly simple :

        System.paths = {            'boot': '/content/typings/boot.js',            'mymodule/*': '/content/typings/myModule/*.js'        };        System.config({            meta: {                'traceur': {                    format: 'global'                },                'rx': {                    format: 'cjs'                }            }        });        System.import('boot');

Include this code after the script tags for angular and all your other librairies.

Since Angular2 is included globally (via the script tags), you don't need to add it to the System configuration. Then in your files, you can import your modules this way :

import { MyThing } from "mymodule/whatever";

If you're up and running with npm install fetching your dependencies into node_modules, here's how to use them there in-place without having to move them into a /lib or /scripts directory, or change the way you write your typescript files from the way shown in the Quickstart:

Project Properties -> TypeScript Build

For "Module System", Select "System":

Set TypeScript compiler options

If using ASP.NET Core, set options in tsconfig.json:

{      "compilerOptions": {    "target": "es5",    "module": "system",    "moduleResolution": "node",    "emitDecoratorMetadata": true,    "experimentalDecorators": true }, "exclude": [    "node_modules" ]}

If you are using ASP.NET (Non-Core), set the compiler options in the csproj file. (Docs for setting compiler options: https://github.com/Microsoft/TypeScript/wiki/Setting-Compiler-Options-in-MSBuild-projects) In a text editor find the PropertyGroup with the other TypeScript options and add in:

<TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators><TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata><TypeScriptModuleResolution>node</TypeScriptModuleResolution>

Load Source files in the correct order

In your index.html, set up your scripts in this specific order to ensure that modules are loaded from the node_modules folder (you have to load rxjs and angular2 bundles after doing System.config otherwise the system loader will download the angular/rxjs source files again since it didn't register them with the right path)

<!-- load system libraries --><script src="~/node_modules/es6-shim/es6-shim.min.js"></script><script src="~/node_modules/systemjs/dist/system-polyfills.js"></script><script src="~/node_modules/angular2/bundles/angular2-polyfills.js"></script><script src="~/node_modules/systemjs/dist/system.js"></script><!-- configure system loader first --><script>    System.config({        defaultJSExtensions: true,        paths: {            'angular2/*': 'node_modules/angular2/*',            'rxjs/*': 'node_modules/rxjs/*'        }    });</script><!-- load app bundles *after* configuring system so they are registered properly --><script src="~/node_modules/rxjs/bundles/Rx.js"></script><script src="~/node_modules/angular2/bundles/angular2.js"></script><!-- boot up the main app --><script>    System.import("app/main").then(null, console.error.bind(console));</script>

App TypeScript can use the standard import syntax, here's app/main.ts:

import {bootstrap}    from 'angular2/platform/browser'import {AppComponent} from './app.component'bootstrap(AppComponent);

Note the angular2 "import" doesn't need to have '../node_modules/' prepended because the TypeScript compiler's module resolution is using "node" mode. (docs on node module resolution logic: https://github.com/Microsoft/TypeScript/issues/2338) Hope that works for you!

I am generally happy with new things with asp.net 5 vnext and Angular 2. But rigging up Angular 2 in Visual Studio has been a hassle. I followed the angular.io quickstart guide religiously and had no luck getting a the Hello Angular 2 app running, until I used the following code:

<script src="~/lib/anguar2/angular2-polyfills.js"></script><script src="~/lib/es6-shim/es6-shim.js"></script><script src="~/lib/systemjs/system.js"></script><script>    System.config({        defaultJSExtensions: true          });</script><script src="~/lib/rxjs/rx.js"></script><script src="~/lib/anguar2/angular2.min.js"></script><script>    System.import('js/boot');</script>