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:
The reason for this is that the result of the HTTP call is 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
You cannot add
Update: You can import all RxJS operators in one call like this:
You can also move the import(s) from every TypeScript file to the main entry point of your app, likely the file with the
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:
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.