How to use Angular 2 with ASP.NET 4.5 / ASP.NET MVC 5?

Datetime:2016-08-23 04:40:08          Topic: AngularJS  ASP.NET MVC           Share

Link opens in new tab

Thanks for your support -- It does make a difference

I got the following question in my ng-sydney AngularJS usergroup:

How to setup ng2 with Vs2015 for asp.net like mvc/web API?

While many blog posts answer the question for ASP .NET Core, very few answered it for ASP.NET 4.5 / ASP.NET MVC 5. So, here’s what I tried, and seemed to work.

Create a new project in Visual Studio

I found this online project template template Angular2 Mvc5 sample application , and it worked pretty well.

Run the sample you get to see the output working.

Also, read the template page for workaround to potential issues with Node.

Upgrade the outcome

Unfortunately, the template only gives you Angular 2 RC1 work, with the deprecated router.

Luckily, it’s not too hard to upgrade it!

package.json

If you go to the official Angular quickstart example , you can get the latest versions of Angular 2 packages in the system.config.js file.

Then you need to apply these to the package.json file in the root of the web project, here’s what the dependencies piece looks like for me, for Angular 2 RC 4:

  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "^0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
 
    "angular2-in-memory-web-api": "0.0.9",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  }

Try running NPM from a command prompt, or go to Visual Studio output window and change “Show output from” to “bower/npm”. If you see errores complaining about a version not existing of some package, the message will tell you what versions are available, and then you can just pick the highest.

For example, I’m excluding replacing the deprecated router from this exercise. So I kept it, and it didn’t have a package for rc4. The error message about that told me that the max version available is rc2, and that seemed to work fine.

The new router also has its own version. You should be able to see that version in the config file like the other Angular files though.

Angular Forms

After that, since Angular forms became a separate module in RC3, this module was not included.

So, first you need to add it, it has a separate version as well. The plunker systemJS file will tell you what. And it’s shown in the above sample.

Then, you also need to add it into your own systemJS config file systemjs.config.js . Just add it to the packageNames definition. It should then look like:

var packageNames = [
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@angular/router-deprecated',
    '@angular/testing',
    '@angular/upgrade',
];

And that’s it. Run the application again, look at the config, and you should see a warning that you are using the deprecated forms module (what is available by default), and shows you a link of how to override it.

Cleanup

Next, you should be able to start using the new router, switching to the new forms, and deleting some codes, to leave room for your own project code!

Good luck :)

Share With Friends:

P.S. Please help me out by checking this offer, then look below it for a special gift

Your Offer

Links open in new tabs

Thanks for your support -- It does make a difference

Your Gift

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up forfrom here or the form below.

It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2, ASP.NET 5, and other fullstack developer needs.





About List