FIX: Angular2 - Missing Http Observable.map Function

The first Http example that most new Angular 2 users get to try their hands on, is this code snippet taken from the Angular 2 Http Docs:

import {Http, HTTP_PROVIDERS} from 'angular2/http';  
@Component({
  selector: 'http-app',
  viewProviders: [HTTP_PROVIDERS],
  templateUrl: 'people.html'
})
class PeopleComponent {  
  constructor(http: Http) {
    http.get('people.json')
      // Call map on the response observable to get the parsed people object
      .map(res => res.json())
      // Subscribe to the observable to get the parsed people object and attach it to the
      // component
      .subscribe(people => this.people = people);
  }
}

What the documentation fails to mention though, is that besides subscribe, other Observablemethods, such as map, for example, need to be imported separately. In the case of map, adding the following import statement at the top of your class file will fix things:

import 'rxjs/add/operator/map';  

What I find a little irritating, is the slowness, with which Google usually updates documentation pages of the open-source projects. For this one in particular, there is a pull request on GitHub, submitted almost half a year now. Please, Google, do us all a favor, and keep introductory documentation pages, up-to-date!

Preslav Rachev

I build search engines, CRMs, and other useful stuff. I'm a professional Java engineer and an enthusiast frontend hacker, who loves writing and sharing ideas.

Munich, Germany http://intro.preslav.me

Subscribe to Preslav's Thoughts and Ramblings

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!