How to setup Angular2 for asp.net mvc?

Question

angular.io has a setup for asp.net core: https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html.

However, I'd like to set it up for an asp.net mvc app. The Quick Start files are already there from the asp.net mvc template. These are the ones from the site:

app folder
styles.css
index.html
package.json
tsconfig.json

The contents of mine look exactly the same. I also added the app and e2e folders from https://github.com/angular/quickstart, which are referenced from the QuickStart.

I then added

<my-app>Loading AppComponent content here ...</my-app>

to Index.cshtml. I can compile and run the app without any errors. But I still see

Loading AppComponent content here ...

when the page renders instead of seeing the following:

Hello Angular

Which is what should appear. The angular.io plunkr verifies this: https://embed.plnkr.co/?show=preview&show=app%2Fapp.component.ts.

Microsoft.TypeScript.Compiler, Microsoft.TypeScript.MSBuild and TypeScript 2 are all installed.

This is just a basic, non modified asp.net mvc app to see if I can get Angular2 working.

The asp.net mvc template may have a different folder/file structure than the asp.net core. So I'm not sure how angular2 knows there is an app folder.

Any ideas why this might not be working?

There is something I don't understand in your post : what do you mean by "The angular.io plunkr verifies this" ? There is nothing in this plnkr... The Angular part seems correct (and should be since you just copy / pasted it). From my experience, you need to configure your .NET Core part to load Angular2 from the index.cshtml Check out this link, it's what I used to understand and configure my ASP.NET MVC Angular2 app at that time. mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio You should look into the Startup.cs file and your index.cshtml to load Angular2. — Alex Beugnet

Long Field Long Field · Accepted Answer · 2017-02-23T11:58:38

https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html is a horrible. firstly it is about asp.net 4.x, who is going to create new project with asp.net 4 today?

If your answer is "I do", then more bad news coming, it never show you how to combine ng2 with asp.net core, check my solution. https://github.com/Longfld/ASPNETCoreAngular2

How to setup Angular2 for asp.net mvc?

1 Answers