Angular4 doesn't send post data

Question

Angular HttpClient doesnt send data to controller. I get a error 500 (because username in controller is null) when i try to execute fun().

test.sevice.ts

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";

import 'rxjs/Rx';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class RestService {

private EndPointUrl = 'http://127.0.0.1:8080/api/test';

constructor(public http: HttpClient){}

fun(){
   this.test().subscribe((data)=>console.log(data));
  }

test(): Observable<string>{
   let params = new URLSearchParams();
   params.append("grant_type",'password');
   params.append('username', 'Name');

   let body = params.toString();

   let headers = new HttpHeaders();
   headers.set('Content-Type', 'application/x-www-form-urlencoded');

   return this.http.post<string>(this.EndPointUrl,  body);
  }
}

package.json

 ...
"dependencies": {
"@angular/common": "4.3.4",
"@angular/compiler": "4.3.4",
"@angular/compiler-cli": "4.3.4",
"@angular/core": "4.3.4",
"@angular/forms": "4.3.4",
"@angular/http": "4.3.4",
"@angular/common/http": "4.3.4",
"@angular/platform-browser": "4.3.4",
"@angular/platform-browser-dynamic": "4.3.4",
...},

Spring MVC Controller:

@RequestMapping(value="/test", 
                method = RequestMethod.POST,
                produces=MediaType.APPLICATION_JSON_VALUE)
public String[] test(HttpServletRequest request){
    Map<String, String[]> parameters = request.getParameterMap();
    return parameters.get("username");
}

Request from postMan works, and returns some username.

Does anyone know what I'm doing wrong?

federico scamuzzi · Answer 1 · 2017-08-18T09:35:59.783

1

What i can see is you're using HttpClient not correctly ... cause it came in angular 4.3.* and is little bit different from the old Http ..

you don't have to do anymore .json() ..so for example:

    return this.http.post<string>(this.EndPointUrl,  body) //<-- IT DON'T NEED HEADERS F.. ITKNOWS IT'S A application/x-www-form-urlencoded
       .map((resp) => {
    return resp;  //<-- HERE resp is your resp.json()
    })
       .catch((err)=>{
console.log(err);
}); }

and then your post:

                let dataForm = new URLSearchParams();


                dataForm.append('userName', "MyUserName");

                let body = dataForm.toString();

   return this.http.post<string>(this.EndPointUrl,  body) //<-- IT DON'T NEED HEADERS F.. ITKNOWS IT'S A application/x-www-form-urlencoded
           .map((resp) => {
        return resp;  //<-- HERE resp is your resp.json()
        })
           .catch((err)=>{
    console.log(err);
    }); }

edited Aug 18 '17 at 09:35

answered Aug 18 '17 at 08:46

federico scamuzzi

3,708
1
17
24

Unfortunately it dosent solve this problem. (I change code for current.) There are still no parameters to the controller. It's strange becouse every simple request from PostMan/RestMan works. – Jakub Radlica Aug 18 '17 at 09:31
try to use let dataForm = new URLSearchParams(); dataForm.append('grant_type', 'password'); dataForm.append('userName', data.userName); instead of params.set() – federico scamuzzi Aug 18 '17 at 09:33
but sorry ... as i can see... the back end code .. don't want fomr-url-encoded but i think it want a json .. – federico scamuzzi Aug 18 '17 at 09:34
when you send it from POSTMAN ... which type do you select? – federico scamuzzi Aug 18 '17 at 09:35
I set raw and write "username=Name" or x-www-form-urlencoded and key:username value:Name – Jakub Radlica Aug 18 '17 at 09:37
when i add to my back end code "consumes = {"application/x-www-form-urlencoded"}" angular get 415 eror , ERROR TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. – Jakub Radlica Aug 18 '17 at 09:43
mmm ..if you watch the developers tools .. can you see the reposnse in network panel? .. and on more thing... your angular method is wrong .. you have to change it as return this.http.post(this.EndPointUrl, body) and not do .map .. if you want that it retrun Observable – federico scamuzzi Aug 18 '17 at 09:46
When i remove .map then request isn't sent. – Jakub Radlica Aug 18 '17 at 10:28
mmmm .. can you post how you call your service in angular? – federico scamuzzi Aug 18 '17 at 10:28
sorry i see it .. in func() – federico scamuzzi Aug 18 '17 at 10:30
try this .. buttonClicked(){ this.restService.test().subscribe((data)={ console.log(data); }); } – federico scamuzzi Aug 18 '17 at 10:32
and then make your constructor(public http: HttpClient){} --> private so constructor(private http: HttpClient){} you don't need a public property for HttpClient – federico scamuzzi Aug 18 '17 at 10:33
It still does not work. Maybe there is a dependency problem? – Jakub Radlica Aug 18 '17 at 11:55

score 0 · Answer 2 · answered Aug 18 '17 at 10:06

0

use Http instead of HttpClient:

import {Http} from '@angular/http';
...

constructor(private http: Http) { }

...

answered Aug 18 '17 at 10:06

AchillesVan

4,156
3
35
47

Angular4 doesn't send post data

2 Answers2

Linked