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 Enums, With special tips for Angular 2

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

A 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?

This makes the previous comparison work:

Now, a couple questions remain:

How do you get the string equivalent?

How do you get all possible enum values?

Gotcha: Writing enum string values in Angular 2 templates

If you write this in your 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

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

Look in the file: “app/app.component.ts”:

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!

Solving Common Angular 2 HTTP Pitfalls: No map() Method for respose.json() & No Http Provider

I had so much fun helping mentoring a couple dozen developers yesterday in SSW’s Angular Hack Day here in Sydney. It was an awesome day from organizers to students.

This post is about the Number 1 problem all students seemed to have, and how to solve it.

The Most Common Problem: map Not A Function

When you make an HTTP request to a JSON endpoint, you map the response text to a JSON object, like this:

When the students ran their own code, which more or less looked like the segment here, they got an exception like this:

2016-04-24_13-31-23

The reason for this is that the result of the HTTP call is an Observable. An Observable has nothing defined by default except subscribe. You need to import any other operator manually like

If you rely on autocomplete in your editor, and it shows a couple of versions for every operator, remember to choose the with with “/add/” in it. As this is the file that add the operator to the Observable definition.

You cannot add * unfortunately.
Update: You can import all RxJS operators in one call like this:

Single Include

You can also move the import(s) from every TypeScript file to the main entry point of your app, likely the file with the bootstrap() call.

Depending on how you set up your compilation and module loader, the entry file import might not work. It works with the SystemJS use you see it in the official Angular 2 quick start though.

Obviously, if you think the entry file include is a hacky way, just add the imports on top of the each file that uses them.

Update for gulp-typescript Users

I found a case where a user on StackOverflow had the same problem, even though he had the correct imports in the bootstrap file. The problem was after upgrading to Angular 2 beta 17.

In this particular case, the user reported that he was using gulp-typescript version 2.12.0. He reported that the problem went away by just upgrading to the very next version, gulp-typescript version 2.13.0.

Oh, and make sure you are using TypeScript 1.8+ also to be safe.

Another Problem: No Providers for Http

Some students also were getting a different error:

2016-04-24_13-52-18

The forgotten part this time was adding the Http providers to the bootstrap. Something like this:

One last tip: Make sure you included the Http file in your scripts if you are starting from a quickstart start or so. As the Http module is included in a separate file in Angular 2.

A Quick Shoutout to Dan Wahlin

During the hack day, students asked me for a good example that shows the solution above. It was not in the official examples (the 5 minutes quickstart, and the Tour of Heroes).

The best I have found on Github is Dan Wahlin‘s Angular 2 JumpStart sample.

It’s named similarly to his Udemy course for Angular 1. I remember his AngularJS in 60-ish minutes YouTube video was a key block in building my Angular 1 learning when I first started it back in 2013.

Thanks for everything, Dan :)

Different People, Different Challenges

With various people hacking away, I got to see different problems that people had getting up and running with Angular 2.

For some people, just setting up Node was more challenging than it should be.

Some others had issues with the sample APIs they chose, because they didn’t have cross domain support (CORS), or returned XML by default and they needed to add an Accept header explicitly.

Some were wondering how to use RxJS to combine results form 2 separate HTTP requests (getting city weather from one, and information about it, or an image URL from another).

How About You?

All these variations got me pretty curious. What was the biggest blocker you had when trying to play with code in Angular 2?

What were your own challenges?

Tweet them to me on Twitter (just mention @Meligy), or just write it down in a comment below.

Fix TypeScript Autocomplete for RxJS Operators And Helpers In NodeJS

I have been working on a Node application, and wanted to use Reactive Extensions (RxJS). All previous interactions with it were in web apps that run in the browser after some SystemJS / Webpack massaging.

At first it looked OK. I could build an Observer, and subscribe to it. I tried to use some operators, and this is when I got stumbled.

The Problem

I had a sample Observable, and I wanted to call flatMapTo on it, but I couldn’t!

Autocomplete only showed the subscribe method, as below:

2016-04-19_07-05-23

Just importing the specific operator file (which modifies the Observable interface and adds the operator method to it) didn’t seem to get the operator autocomplete (or successful compilation at times) to work.

I didn’t want to have to add each operator manually anyway, and this is Node not browser, I don’t have to be picky about imports (and again, it didn’t work anyway).

Note:

I was specifically trying map(), which I was able to get to work with ES2015 targeting (I’m working with Node 5, which has fair ES2015 support).

But that’s because an Observable is also an Iterable object that you can loop over, like an array.

I was not able to get switchMap() (Rx v5), or even it’s v4 equivalent flatMapLatest() though, or any other operator than map() – before I noticed I was not even calling that as an operator.

The documentation suggested the following line.

But it only threw an error. Which was very weird, because I could find the typings registry entry with this very name.

There were other suggestions for other platforms, which didn’t work for me anyway!

I also struggled to find examples of using RxJS operators with even something like Angular 2. Hence I’m writing this blog post.

How To Get TypeScript Intellisense To Work With RxJS

The main key to working with this was using the “KitchenSink” Definition file. This was also confirmed by looking at:

Property ‘distinct’ does not exist on type Observable<CustomType>

I can use this no problem because I’m in Node and not much worried about the size of the code, etc.

However, this post was not enough to get it to work. I still had a lot to fiddle with. As I mention later, I tried many things, and everything I found working stopped working afterwards.

Until I could nail it down to the following steps:

Install From NPM

You can get that by

Make sure you got at least version beta.6, not beta.2.

Add Definition File

You can do this from your tsconfig.json, like:

Or in each TypeScript file if you choose to, at the top of the file:

Gotchas

For the most part, the previous steps are going to be enough. However, I have found a few more gotchas in different editors, most of them are around WebStorm, which is crazy, as outside Rx, it seems to be an awesome TypeScript IDE.

I like WebStorm because it has the best autocomplete in strings (like paths and imports), and in tsconfig.json (which is outdated in VS Code).

Also, the gotchas sometimes happen in VS Code anyway. I have been going crazy between the two, as soon as I get something to work, undo it and repeat the exact steps, it doesn’t work.

Operator And Type inference

Sometimes type inference doesn’t work. I have found VS Code to be better at this than WebStorm.

In this example, autocomplete for sample1$. will give autocomplete for any, which is OK as it’ll accidentally give autocomplete for RXJS operators.

But if you want proper autocomplete:

Note the : Observable<string> bit.

Observable Helper Methods

These are methods like like of, range, etc. I have found their autcomplete to the worst, it’s very flaky at best.

A few things seemed to help, like importing from "rxjs/onservable".

(Vs from "import {Observable} rxjs")

I have also found that doing import {Observable} works better than import * as Rx.

When everything fails, going to TypeScript compiler in WebStorm and building current file, or even restarting WebStorm (Yes!!) helps fix autcomplete issues, especially if you changed your references and imports a few times. It just gets confused and doesn’t work well until an IDE restart.

Disclaimer

Just in case it’s not obvious for those not familiar with TypeScript. I have been doing JavaScript for so long. I’m not the person who can’t code without a fully-functional autocomplete.

But since autocomplete is an essential advantage of going the TypeScript way, and I have been loving working with RxJS from the demos I saw, I wanted to take it as a challenge more than anything else to see what it would take to get this working.