AngularJs 2 with ASP .NET 4.5.1 AngularJs 2 with ASP .NET 4.5.1 asp.net asp.net

AngularJs 2 with ASP .NET 4.5.1


To answer my original question, this is how we have managed to get Angular 2 up and running with .net 4.5.1 (we did end up having to use npm).

In the header of _Layout.cshtml, imported the Angular 2 files from the cdn and configured SystemJs.

<!-- 1. Load libraries --><!-- IE required polyfills, in this exact order --><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/es6/dev/src/testing/shims_for_IE.js"></script><script src="../../node_modules/angular2/bundles/angular2-polyfills.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><!-- 2. Configure SystemJS --><script>  System.config({    packages: {        'my-app': {        format: 'register',        defaultExtension: 'js'      }    }  });    System.import('my-app/main')        .then(null, console.error.bind(console));</script>

Added package.json and tsconfig.json to the route of the project

packages.json:

{ "name": "angular2-quickstart", "version": "1.0.0", "scripts": {  "tsc": "tsc",  "tsc:w": "tsc -w",  "typings": "typings",  "postinstall": "typings install"  }, "license": "ISC", "dependencies": {  "angular2": "2.0.0-beta.9",  "systemjs": "0.19.24",  "es6-promise": "^3.0.2",  "es6-shim": "^0.35.0",  "reflect-metadata": "0.1.2",  "rxjs": "5.0.0-beta.2",  "zone.js": "0.5.15" }, "devDependencies": {  "typescript": "^1.8.7",  "typings": "^0.7.5"  }}

tsconfig.json:

{ "compileOnSave": true, "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false},"exclude": [ "node_modules", "typings/main", "typings/main.d.ts" ]}

If you have node and npm installed on your machine, it should automatically download the npm modules you need, and save them in the node_modules folder. You should now be ready to set up an Angular 2 application, we used the this to get started.


I have created a startup project for Angular 2.0 which just went live at https://github.com/chanoto89/angular2-startup with ASP.NET 4.5.2.

I used the http://blogs.msmvps.com/deborahk/angular-2-getting-started-with-a-visual-studio-2015-asp-net-4-x-project/ outline, but took advantage of using MVC as well as gulp to move the needed dependencies inside the project rather than using the entire node_modules installed by npm.