CODEWITHSUNDEEP
asp.netnode.jsangular
Dan O'Leary
Dan O'Leary

Reputation: 2822

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?

Upvotes: 16

Views: 20561

Answers (4)

asolvent
asolvent

Reputation: 881

I followed https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html and ran into an issue, this is just to help if someone runs into same.

For some reason I wasn't getting restore packages option on package.json on a new project, restarting the visual studio 2015 profession brought the option again.

And I had to copy systemjs.config.js in projects folder else it was stuck on Loading ... , developer bar showed 404 for systemjs.config.js and copying it brought 'My First Angular Help'.

Upvotes: 0

chanoto89
chanoto89

Reputation: 241

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.

Upvotes: 2

McGuireV10
McGuireV10

Reputation: 9926

They've updated the Angular site with a non-Core scenario:

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

Upvotes: 2

Dan O'Leary
Dan O'Leary

Reputation: 2822

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.

Upvotes: 19

Related Questions