Dan O'Leary Dan O'Leary - 1 year ago 326
Node.js Question

AngularJs 2 with ASP .NET 4.5.1

I would like to use Angular 2 for the front end of an existing ASP.NET 4 app, i.e. not MVC 6/ASP.NET CORE, and I'd rather not use node as we are already using nuget as our package manager. Does anyone know of any resources that will guide me through this?

Answer Source

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 -->
    packages: {
        'my-app': {
        format: 'register',
        defaultExtension: 'js'
        .then(null, console.error.bind(console));

Added package.json and ts.config to the route of the project

 "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"

 "compileOnSave": true,
 "compilerOptions": {
 "target": "es5",
 "module": "system",
 "moduleResolution": "node",
 "sourceMap": true,
 "emitDecoratorMetadata": true,
 "experimentalDecorators": true,
 "removeComments": false,
 "noImplicitAny": false
"exclude": [

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download