I am using angular 2 to make a get request and a post request. My get request works fine, but for my post, I do not see the request is made when checking my Firebug Net panel.

The code methods look like follows. I also have subscribe methods invoking them from a ponent class.

import {Injectable} from "angular2/core";
import {Http, Response, Headers, RequestOptions,  Jsonp, URLSearchParams} from "angular2/http";
import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map'; 

 @Injectable()
export class MyService{
    constructor (private _http: Http){}  


testPost(){      

    var json = JSON.stringify({"userId": 111, "givenName": "CZ"});
    var body = "json="+json;
    var headers = new Headers({ 'Content-Type': 'application/json' });
    var options = new RequestOptions({ headers: headers });

    return this._http.post("", body, options)
        .map(this.extractData)
        .catch(this.handleError);

}

  private extractData(res: Response) {
    alert("test whether this method is reached");

    let body = res.json();
    return body.data || { };
  }

  private handleError (error: any) {
    alert("test whether this method is reached");

    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }     

 //testGet method is running well
testGet(link:string){

    return this._http.get(link)
    .map(res => res);

}     
}

my subscribing method onTestPost(), which is assigned to a button on the page.

onTestPost(){
    this.myService.testPost()
    .subscribe(
        data => this.getData = JSON.stringify(data),
        error => alert(error),
        () => console.log("Finished")            
        );
}

I put an alert statement at the beginning of two helper methods. None of the alerts is reached. And I don't see any request called to the my local post url when debugging with Firebug.

While my testGet method works correctly, I just don't know what is missing for the testPost.

I am using angular 2 to make a get request and a post request. My get request works fine, but for my post, I do not see the request is made when checking my Firebug Net panel.

The code methods look like follows. I also have subscribe methods invoking them from a ponent class.

import {Injectable} from "angular2/core";
import {Http, Response, Headers, RequestOptions,  Jsonp, URLSearchParams} from "angular2/http";
import { Observable }     from 'rxjs/Observable';
import 'rxjs/add/operator/map'; 

 @Injectable()
export class MyService{
    constructor (private _http: Http){}  


testPost(){      

    var json = JSON.stringify({"userId": 111, "givenName": "CZ"});
    var body = "json="+json;
    var headers = new Headers({ 'Content-Type': 'application/json' });
    var options = new RequestOptions({ headers: headers });

    return this._http.post("http://mylocal.post.url", body, options)
        .map(this.extractData)
        .catch(this.handleError);

}

  private extractData(res: Response) {
    alert("test whether this method is reached");

    let body = res.json();
    return body.data || { };
  }

  private handleError (error: any) {
    alert("test whether this method is reached");

    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }     

 //testGet method is running well
testGet(link:string){

    return this._http.get(link)
    .map(res => res);

}     
}

my subscribing method onTestPost(), which is assigned to a button on the page.

onTestPost(){
    this.myService.testPost()
    .subscribe(
        data => this.getData = JSON.stringify(data),
        error => alert(error),
        () => console.log("Finished")            
        );
}

I put an alert statement at the beginning of two helper methods. None of the alerts is reached. And I don't see any request called to the my local post url when debugging with Firebug.

While my testGet method works correctly, I just don't know what is missing for the testPost.

• javascript
• angular
• observable

• The code looks okay, most likely you didn't really subscribed properly. – dfsq Commented Jun 26, 2016 at 21:42
• Just in case, make sure something like a mock backend is not catching the request. – Adam Mendoza Commented Dec 19, 2016 at 4:56

2 Answers 2

I think your subscribe methods are the issue here. Please make sure subscribe is called.

"This observable is cold which means the request won't go out until something subscribes to the observable."

See https://angular.io/docs/ts/latest/guide/server-munication.html

testPost() : Observable <Response> //import{Response} from '@angular/http'
{      
var json = JSON.stringify({"userId": 111, "givenName": "CZ"});
var headers = new Headers({ 'Content-Type': 'application/json' });
var options = new RequestOptions({ headers: headers });
return this._http.post("http://mylocal.post.url/api",JSON.stringify(json), options)
    .map((res:Response)=>res.json())
    .catch(this.handleError);
}