Angular2 http is missing .map function

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?

Maybe http://stackoverflow.com/questions/34394708/in-angular-2-0-0-beta-0-map-and-filter-are-missing-from-a-form-inputs-obser or http://stackoverflow.com/questions/34394708/in-angular-2-0-0-beta-0-map-and-filter-are-missing-from-a-form-inputs-obser/34396552? — Günter Zöchbauer, Jan 03 '16 at 20:58
This has been answered thousand of times, it just requires a search. — Eric Martinez, Jan 03 '16 at 21:52

score 31 · Answer 1 · answered Jan 03 '16 at 21:25

31

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';

answered Jan 03 '16 at 21:25

Sasxa

40,334
16
88
102

This should be the accepted answer. Shorter, easier to grok, and works. – Rap Oct 22 '16 at 22:11
I have no idea why but I need to add `import * as Rx from 'rxjs';` and `Rx.Observable.of(0);` to make Observable support map function – tom10271 Oct 28 '16 at 06:17
That's actually a very bad solution @tom10271. Never use import * – Enrico Dec 11 '18 at 15:02
1

@Enrico I did not say and suggest it is a solution and I definitely know the consequences of import *. I was just saying I was confused why this is the working one in my project. – tom10271 Dec 12 '18 at 00:54

score 9 · Accepted Answer · answered Jan 03 '16 at 21:38

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';

Angular2 http is missing .map function

2 Answers2

Linked