Angular2 http is missing .map function [duplicate]

Question

I found this example code in a tutorial:

getRandomQuote() {
  this.http.get('http://localhost:3001/api/random-quote')
    .map(res => res.text())
    .subscribe(
      data => this.randomQuote = data,
      err => this.logError(err),
      () => console.log('Random Quote Complete')
    );
}

But when trying to use it, I only get TypeError: this.http.get(...).map is not a function in [null]:

getChannels():Promise<Channel> {
    return this.http.get('...')
        .map(function (response:Response) {
            ...
        }).toPromise();
}

My Typescript compiler tells me that those methods are avaible but when inspecting the return value of http.get() they are missing.

I used the package.json of the current angualar2 starting guide:

"dependencies": {
  "angular2": "2.0.0-beta.0",
  "systemjs": "0.19.6",
  "es6-promise": "^3.0.2",
  "es6-shim": "^0.33.3",
  "reflect-metadata": "0.1.2",
  "rxjs": "5.0.0-beta.0",
  "zone.js": "0.5.10"
},

...

<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

Any ideas what I might get wrong at this point?

Answer 1

Observable by default comes with just a few operators. You have to explicitly import them:

import 'rxjs/add/operator/map';

or, if you don't wanna think about it, just load everything (in your bootstrap file, for example):

import 'rxjs/Rx';

Answer 2

You will want your index.html to look something like this, so system.js can find all the rxjs dependencies that you import in your components.

        <script src="/lib/anguar2/angular2-polyfills.js"></script>
        <script src="/lib/es6-shim/es6-shim.js"></script>
        <script src="/lib/systemjs/system.src.js"></script>

        <script>
            System.config({
                defaultJSExtensions: true,
                packages: {
                    app: {
                        format: 'register'
                    }
                },
                map: {
                    'rxjs':"lib/rxjs"

                }
            });
        </script>
        <script src="/lib/anguar2/angular2.dev.js"></script>
        <script src="/lib/anguar2/router.dev.js"></script>
        <script src="/lib/anguar2/http.js"></script>
        <script>
            System.import('app/boot');
        </script>

Make sure the "lib/rxjs" folder has ALL the files from the node_modules/rxjs folder. Not all of them will be loaded, only the ones you need and their dependencies (system.js will figure this out for you).

Now you can use this in your boot.ts file:

import 'rxjs/add/operator/map';