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:

getList() : Observable<ListItem[]> {
  return this.http.get(this._listUrl)
                 .map(response => response.json())

When the students ran their own code, which more or less looked like the segment here, they got an exception like this: EXCEPTION: TypeError: this._http.get(...).map is not a function in [null]


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

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

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:

import 'rxjs/add/operator/';

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: EXCEPTION: Error: Uncaught (in promise): No provider for Http! (CustomersComponent -> DataService -> Http)


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

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { HTTP_PROVIDERS } from '@angular/http';
import { AppComponent } from './app.component';

bootstrap(AppComponent, [HTTP_PROVIDERS]);

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.

Share With Friends:

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

  • Brendan Alexander

    Helpful post thanks. I got into producing production-ready web apps in angular2 within weeks after it became beta. Definitely the build/task runner setup was the biggest learning curve. Angular2 coding, on the other hand, I find fun and intuitive.

  • Nick Raphael

    Hey Meligy. Was looking for a solution to this error:
    Property ‘map’ does not exist on type Observable

    It only manifests in VS2015 as a squigly underline. The app transpiles and runs. It’s just annoying. I get the error on all rxjs methods. I have the following at the top:
    import ‘rxjs/add/operator/’;

    Anyway, hope you’re enjoying ng-conf and I’ll see you at the upcoming angular meetup.

    Nick Raphael

    • Hi Nick,
      A possible problem is that the tooling in VS 2015 is not up to date.
      As mentioned in the update above, with newer versions of Angular, you need TypeScript 1.8.

      Try downloading it for VS 2015 from here
      Or ensure you have Visual Studio 2015 Update 2, which includes it too

      If this doesn’t work, please try to have a Github repository that shows the error, and I can try it in my VS 2015 and see what needs to be done (I don’t usually use VS2015 for playing with Angular 2, I use Webstorm instead, and VS2015 only for current ASP.NET MVC sites, etc.).

      • Nick Raphael

        Seems the issue isn’t in the solution since I get the same effect when I load up the angular2 quickstart and add code for observable. I updated to VS2015 Update 2 but I still get the issue. Very odd.
        I’ve included a screenshot.

  • Saeid

    import ‘rxjs/Rx’; // Loads all features

  • My biggest gripe is the lack of convention across different tutorials – nevermind the lack of updated examples for the 2.0.0 release. For example, every redux tutorial uses a totally different file structure etc but none ever really do a good job of getting a new user started. My current sticky point.

  • Pingback: site sell login()

  • Pingback: GVK Biosciences()

  • Pingback: Bdsm()

  • Pingback: online wiet bestellen()

  • Pingback: jogos friv()

  • Pingback: iraq Colarts()

  • Pingback: roof repair()

  • Pingback: iraqi coehuman()

  • Pingback: iraqi Ceohuman Diyala()

  • Pingback: cpns 2018 wilayah palembang()