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?
10
-
4Do not come to Stack Overflow to ask broad open ended "how do I do this" style questions or to ask for someone to provide you with some offsite resource. Stack Overflow is for answering specific solvable programming problems.mason– mason2016-03-23 18:56:35 +00:00Commented Mar 23, 2016 at 18:56
-
4@mason Granted, the question isn't phrased in a specific way (and granted the OP is asking for a tutorial), but the underlying problem is legitimate and could be expressed in a more legitimate way (e.g. "I tried doing this and I got build errors"). The underlying issue seems to be that ASP.NET MVC 4 / .NET 4.5 doesn't play nicely with Angular 2 and I'm very curious as to why. Google doesn't seem to have much to offer on MVC 4 + Angular 2 + VS2015.alex– alex2016-03-23 19:53:43 +00:00Commented Mar 23, 2016 at 19:53
-
@mason You are correct that Angular 2 is a client-side technology, but the OP is asking about Angular 2 operability with NuGet instead of NPM in an MVC 4 project - possibly with mixed .NET 4.5 + Core references and possibly with Typescript and NuGet-based Typescript Angular 2 defintion support. Of course this isn't explicitly in the OP's question but not outside the realm of possibility.alex– alex2016-03-23 20:08:32 +00:00Commented Mar 23, 2016 at 20:08
-
I agree, my original question was too broad. I'm happy to explain how we solved this in the end here though, or is the consensus that I should ask a new question?Dan O'Leary– Dan O'Leary2016-03-24 09:40:30 +00:00Commented Mar 24, 2016 at 9:40
-
1@DanO'Leary What about this tutorial?.Eric Martinez– Eric Martinez2016-03-27 17:07:39 +00:00Commented Mar 27, 2016 at 17:07
|
Show 5 more comments
4 Answers
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.
5 Comments
alex
How did you end up getting Typescript to work? Are you using Visual Studio 2015, Typescript Tools for Visual Studio 2013, or the npm Typescript package?
Dan O'Leary
We're using Visual Studio 2015 and Typescript Tools 1.8
Rafe
I just want to point out that file should be named package.json not packages.json
Ashish
i am trying with visual studio 2013 and typescript 1.6 . and No luck . Anybody has solution please ?
Matt
@Ashish I recommend starting your own question regarding that.
They've updated the Angular site with a non-Core scenario:
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html
1 Comment
Emre K.
On step 3 of this tutorial, you need to include systemjs.config.js in addition to the files the tutorial tells you to include in the project.
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.
1 Comment
Roman
The best practice is to pull the needed dependencies into the project system from node_modules area instead of including that folder structure.
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'.
