error TS2345: Argument of type '{ headers: HttpHeaders; }' is not assignable to parameter of type 'RequestOptionsArgs'

Question

This is the result I get when I run ionic serve. I am using ionic4 version with Angular 8.

src/app/home/home.page.ts:60:77 - error TS2345: Argument of type '{ headers: HttpHeaders; }' is not assignable to parameter of type 'RequestOptionsArgs'. [ng] Types of property 'headers' are incompatible. [ng] Type 'HttpHeaders' is missing the following properties from type 'Headers': forEach, values, toJSON, entries, mayBeSetNormalizedName [ng] 60 this.http.post("http://localhost/android/Api.php?apicall=signup", postData,options) [ng]

sendPostRequest() {

    let headers = new HttpHeaders();

    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'text/plain');
    let options = {
        headers: headers
    }


    /*
         if (this.authService.checkAuth()) {
             const token = 'something';
             headers = headers.set('Authorization', `Bearer ${token}`);
         }
      const authReq = req.clone({ headers });*/


    let postData = {

        "username": "Customer004",
        "email": "[email protected]",
        "password": "0000252525",
        "gender": "male",
    }

    /*this.http.post("http://localhost/android/Api.php?apicall=signup", postData, requestOptions)
      .subscribe(data => {
        console.log(data['_body']);
       }, error => {
        console.log(error);
      });*/


    var options = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json'
        })
    };


    this.http.post("http://localhost/android/Api.php?apicall=signup", postData, options)
        .subscribe(data => {
            console.log(data);
        });

}

package.json

{
  "name": "registration",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.1.2",
    "@angular/core": "~8.1.2",
    "@angular/forms": "~8.1.2",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "~8.1.2",
    "@angular/platform-browser-dynamic": "~8.1.2",
    "@angular/router": "~8.1.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.7.1",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.801.2",
    "@angular-devkit/build-angular": "~0.801.2",
    "@angular-devkit/core": "~8.1.2",
    "@angular-devkit/schematics": "~8.1.2",
    "@angular/cli": "~8.1.2",
    "@angular/compiler": "~8.1.2",
    "@angular/compiler-cli": "~8.1.2",
    "@angular/language-service": "~8.1.2",
    "@ionic/angular-toolkit": "^2.1.1",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project"
}

Answer 1

You should do that import : import { Http, Headers, RequestOptions } from '@angular/http';.

The DI Injection from http is ok. Then simply use RequestOptions as follow:

sendPostRequest() {
    let headers = new Headers({'Content-Type': 'application/json'});
    // headers.append('Content-Type', 'text/plain');
    // I didn't understand if you need this append.

    let options = new RequestOptions({ headers: headers });

    const postData = {
        "username": "Customer004",
        "email": "[email protected]",
        "password": "0000252525",
        "gender": "male",
    }

    this.http.post("http://localhost/android/Api.php?apicall=signup", postData, options)
        .subscribe(data => {
            console.log(data);
        });
}