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!
If you go to the official Angular quickstart, which you can reach by going to angular.io, and clicking “Get started”), you can find the package versions you need in 2 ways:
- Clicking “live example”, which takes you to the Plunker example page, you can get the latest versions of Angular 2 packages in the
- Scrolling to Step 1 – b, which shows a
package.jsonfile you can just copy the
Once you figure out the version numbers, 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:
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.
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:
And that’s it. Run the application again. You should still see the demo Todo-list with routing working.
Look at the browser devtools console. 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.
This means the project is working well with Angular 2 RC4, and the deprecated forms and router.
Next, you should be able to start deleting the sample components to leave for your own application components.
Before you do that, you might want to see how the project template works, including the serverside ASP.NET MVC bits. This will give you some guidance on how to structure your own.
Once you are done, you can remove the deprecated router from application bootstrapping file and from NPM dependencies. Then start using the new router, which we already included in the previous steps.
You should also be good to disable the deprecated forms (those are not a separate NPM module, so that stays the same), by modifying the application bootstrapping code as the link in the browser console tells you.
Good luck :)
How did I learn that?
As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.
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 (4.x/MVC5 and Core), and other fullstack developer goodies.
Take it for a test ride, and you may unsubscribe any time.
You might also want to support me by checking these out [Thanks]: