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

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.

File -- New Project

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, which you can reach by going to angular.io, and clicking “Get started”), you can find the package versions you need in 2 ways:

  1. Clicking “live example”, which takes you to the Plunker example page, you can get the latest versions of Angular 2 packages in the system.config.js file.
  2. Scrolling to Step 1 – b, which shows a package.json file you can just copy the dependencies section from.

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.

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:

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.

Cleanup

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 :)

Where’s Angular 2 going after a couple of RC releases?

Note

This blog post first appeared in my Web Developer Newsletter on June 16.
Look for the form to sign up to the newsletter below.

Hello!
This is Meligy from GuruStop.NET. Just checking if you got the news, Angular 2 RC2 is out!

Here’s the official announcement – and the changelog

The big highlights for this release for me seem to be:

  • The first release of the template compiler
    It allows you to compile templates as a build step, and avoid loading the Angular compiler in runtime.
    The Angular team say this compiler is the most essential to marking Angular 2 as final release.
  • Simplifications to forms
    If you played with Angular 2 forms and find the syntax confusing / redundant like me, this is big news
  • A new rewrite of the router
    This rewrite seems better than the on in previous RC.
    The official blog says it has contributions from ui-router and ngrx/router
  • Some new features
    Namely the animation framework

By the way, I’m personally sticking to Angular CLI when trying newer versions of Angular 2.
If you are taking this route, note that you need to uninstall the CLI, and clean npm cache before installing a new version.

That’s it for me. How about you?

Have you been playing with Angular 2 yet?

Or still looking for a good place to learn it?

Write back to me and let me know :)

Cheers,

Angular 2 for Angular 1 Developers — Full Video of My DDD Sydney 2016 Talk

Whether you have been to my talk at DDD Sydney 2016, or we never met before, here’s the entire recording as I captured it on my machine.

I decided to just upload the raw file with minimum or no video editing, so that I can get it up as soon as possible.

Let me know what you think, and what you’d like me to talk about in future videos.

You can tweet at me — @Meligy, and I’ll reply back as soon as I see it.

How to use TypeScript Enum types, especially with Angular 2

Let’s assume you have the following enum in TypeScript:

An enum is just an object. Your enum is written something like this in JavaScript:

The benefit from typing is very limited in enums. Let me explain…

A very common thing you might want to do, is convert a string to an enum. This line is valid:

But it’s not useful, because

So, you should always store your values as numbers, which you can obtain as follows:

How do you convert a string to an enum in TypeScript?

This makes the previous comparison work:

Now, a couple questions remain:

How to convert a TypeScript enum value to a string?

How to get all the values of a TypeScript enum type?

Gotcha: Undefined enum type in Angular 2 views

If you write this in your Angular2 template:

It will fail, because it doesn’t have access to imported types (it gets executed later by AngularJS).

To make it work, your component will need to have a reference to the enum type / object, something like:

Runnable Demo With All Solutions

Here is an example that explains everything I pointed in here:

(Click the button at the top right to see it in action)

This post was inspired by this StackOverflow answer.

The Pre ng-conf Special — Some Great Resources for AngularJS

Note

This blog post first appeared in my Web Developer Newsletter a few hours before AngularJS ng-conf started.
Look for the form to sign up to the newsletter below.
Are you ready for ng-conf today? 
There are a lot of videos to watch, live, or as recordings in the time that suits you.
 
They are all available here:
 
 
If you’ll be watching the recording later, I expect the streams will be available as recordings of the whole day at first – via the same links; and then later in a couple of days or a couple of weeks will have separate recordings for each session with new links.
 

Another Great Angular 2 Videos

 
Also, make sure you didn’t miss the Angular team talk in early April, about HTTP and Observables, Angular CLI, and accessibility testing, and here’s the recording:
 
 
Looking for something a little bit more advanced? Check this free EggHead video on using RxJS and Redux framework (often used with React), with Angular 2:
 
 
Or if you want something more basic, check
 
 

AngularJS Performance Videos

 
If you are still doing Angular 1, check out Todd Motto’s awesome AngularJS FREE course as well:
 
 
And here’s another FREE webinar he did on the same topic
 
 

Angular 2 — RC 1

 
Finally, you probably heard it already. Angular 2 is now an RC 1 release, out of beta!
 
There are a lot of changes in RC if you are using the new router heavily.
Other than that, you need to watch for changes to pipes in beta-16, and to ngFor in beta-17.
 
Here’s the full changelog:
 

Learning Angular 2

 
If you are looking for some Angular 2 project to look at code and come up with patterns to use yourself, Dan Wahlin has a great sample, that’s already updated to Angular 2 RC 1:
 
 
If you are into different experiments with the limits of the Angular 2 API, check Ben Nadel’s recent Angular 2 blog posts:
 
 
If you are looking for a big list of different resources to learn Angular 2, check out this list:
 
 
If you are playing with Angular 2, remember that you can always email me and I can always try to help. Here are the most common gotchas people seemed to fall into in an Angular Hack Day I helped mentor in Sydney
 
 
And of course stay on this list for more AngularJS, TypeScript, NodeJS, ASP .NET, etc. goodness in future issues!
 
That’s it for this one, though.
 
Enjoy :)

– –

Mohamed Meligy

Senior Software Consultant | Readify
Organizer | ng-sydney User Group

 

P.S.
Do you have any good free resources for AngularJS, TypeScript, NodeJS, EcmaScript / JavaScript, ASP .NET, or web development in general that you’d like to share with 1,100+ members of this list?
Or, do you have a good useful product you’d like to be a sponsor of the next issue?
Just email me about it, and let’s have a chat!