Change Http to HttpClient , now post method not working

Ionic Framework ionic-v3
1

Dear Friends,
I change from ‘Http’ to ‘HttpClient’ method as described in AngularJS 4.3 or above. Now one of my workig form stop working. The request and response work fine but the data get return on the function is ‘null’.

my problematic page ts file here

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, AbstractControl } from '@angular/forms';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
//import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';


/**
 * Generated class for the PaymentPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-birth-certificate',
  templateUrl: 'birth-certificate.html',
})

export class BirthCertificatePage {
  formgroup:FormGroup;
  username:AbstractControl;
  data:any = {};

  
constructor(public navCtrl: NavController, public navParams: NavParams, public http: HttpClient, public formbuilder: FormBuilder ) {
     this.formgroup = formbuilder.group({
       username:['',Validators.required]
     });
     this.username = this.formgroup.controls['username'];
     this.data.username = '';
     this.data.response = '';
     this.http = http;
  }
  submit() {
   var link = 'http://nikola-breznjak.com/_testings/ionicPHP/api.php';
   var obj = {username: this.data.username};
   var myData = JSON.stringify(obj);
   alert(myData); //ALERT DATA HERE ON FORM SUBMIT
   this.http.post(link, myData)
   .subscribe(data => {
   //this.data.response = data["_body"]; //https://stackoverflow.com/questions/39574305/property-body-does-not-exist-on-type-response

   alert(data);   //RETURNS NULL VALUE
   //this.data.response = data;
   }, error => {
   console.log("Oooops!");
   });
 }

  ionViewDidLoad() {
    console.log('ionViewDidLoad BirthCertificatePage');
  }

}

Please advise I am hanging on this problem for 4 hours

Thanks

Anes

2

i face the same problem :frowning:

3

Set your header…

{headers: {'Content-Type': 'application/json'}