Angular2 - http.post(...).map is not a function

Question

I've looked up all the github issues, and the StackOverflow posts, but I'm unable to get it working

( https://github.com/angular/angular/issues/5632 )

(Angular 2 HTTP GET with TypeScript error http.get(...).map is not a function in [null] )

I'm using Angular2@2.0.0-beta.1
Rxjs (rxjs@5.0.0-beta.1) is successfully imported when I check console/resources in console.

I tried different imports:

import 'rxjs/add/operator/map';

import 'rxjs/rx';

But I keep getting the error http.post(...).map is not a function

update - code context

let body = "email=" + email + "&password=" + password;
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-from-urlencoded');
this.http.post('http://angular.app/api/v1/auth') // angular.app is laravel backend
      .map( (responseData) => {
          return responseData.json();
      })

Could you give us moure details about the code around your HTTP call? Thanks! — Thierry Templier, Jan 25 '16 at 08:49
Thanks! Do you add `HTTP_PROVIDERS` when calling your `bootstrap` function? — Thierry Templier, Jan 25 '16 at 08:58
@ThierryTemplier I didnt! It does changes something, because now I get another error: `ReferenceError: map is not defined` but I did import `rxjs/add/operator/map` in every file (even on my main file) — Angelo A, Jan 25 '16 at 09:09
@ThierryTemplier the above was the problem (I needed to add HTTP_PROVIDERS). I had another error which caused the above error. (Syntax problem, my bad). Can you post this as an answer so I can accept? — Angelo A, Jan 25 '16 at 17:59

score 7 · Answer 1 · answered Jan 25 '16 at 14:37

For me the http.post(...).map() works as expected. I do need the import 'rxjs/Rx'

import {Component} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <p>Test result {{result | json}}</p>
    `
})
export class App implements OnInit{
 public title = 'my title';
 public result : String;

constructor(private _http : Http) {
  _http.post('http://jsonplaceholder.typicode.com/posts')
    .map(res => res.json())
    .subscribe(
      data => this.result = data,
      err => console.log('ERROR!!!'),
      () => console.log('Got response from API', this.result)
    );
  }
}

See plunker example: http://plnkr.co/edit/vise2zYxZUmr1kW65mNY?p=preview

hopes this will help you to find your porblem

This worked for me. I was having the same problem with `"@angular/core": "^4.0.0","rxjs": "^5.1.0" ...` — Dev, Apr 21 '17 at 12:19

Thierry Templier · Accepted Answer · 2016-01-25T18:01:40.307

2

It seems that Angular2 beta.1 requires RxJS 5.0.0-beta.0. Perhaps it's the cause of your problem.

If I try this in my package.json file:

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

And I have the error that Angular2 requires RxJS 5.0.0-beta.0.

Edit

You need to add the HTTP_PROVIDERS within the second parameter of your bootstrap function.

Hope it helps you, Thierry

edited Jan 25 '16 at 18:01

answered Jan 25 '16 at 09:33

Thierry Templier

198,364
44
396
360

I tried beta.0, still no luck, I get the same error ( `ReferenceError: map is not defined` ) – Angelo A Jan 25 '16 at 09:56
@AngeloA did you try with: `import 'rxjs/Rx';` (`Rx` not `rx`)? – Thierry Templier Jan 25 '16 at 15:11
Yes I did, (capital R) – Angelo A Jan 25 '16 at 17:45
That's really strange. Would it be possible for you to create a plunkr to reproduce this? Thanks! Here is a one describing a working HTTP sample: https://plnkr.co/edit/XFmSGw4etdGvvPNkJxkI?p=preview. – Thierry Templier Jan 25 '16 at 17:56
I'm having the same problem despite adding the imports, @AngeloA were you able to resolve this? I'm using "@angular/common": "2.0.0-rc.5" and "rxjs": "5.0.0-beta.6" – john mitsch Nov 01 '16 at 23:26
@johnmitsch to be honest I stopped using Angular. It had too much flaws at that point. As far as I can remember, I didn't solve it. You should probably search SO for other posts. I think this must be resolved by now. – Angelo A Nov 02 '16 at 12:09

Angular2 - http.post(...).map is not a function

2 Answers2