Search code examples
restcordovahttpionic2put

How to send HTTP PUT request using ionic2 native http plugin?


I am trying to send an HTTP put request from an ionic 2 app using an http native plugin, however, from the doc, I see only post and get request methods are implemented.

First: I would like to know if http methods delete and putare not really implemented (as I might not be looking at right place in the docs).

Second: If those are not implemented, how we can generate put and delete from an ionic 2 app? Is it possible to do it at low level, yet without the need to do modification to the plugin native/library code?

Thanks in advance.

Update 1: There is a pull request for put, delete and postJSON implementation (https://github.com/wymsee/cordova-HTTP/pull/105), however from September 2016 till now April 2017 it is not merged with master.

Update 2: First I would like to thank @Jamil Hijjawi for the answer. That solved the problem. But in the way, I would like to mention the solution 2 requires some server configuration to get around CORS, so I chose the first one. Also there is a nice article https://www.joshmorony.com/using-cordova-plugins-in-ionic-2-with-ionic-native/ that explains how to use a cordova plugin that is not in "Ionic Native", I do recommend to go through it. I would like to point out a section, as:

The way in which you use a non Ionic Native plugin in Ionic 2 is the same as the way you would use it in any Cordova project, which is however the plugin’s documentation says you should use it. However, there are some extra steps you need to take because TypeScript will cause some problems.

Going further it explains that we need to declare the globally exported variable cordovaHTTP by the plugin in somewhere like declarations.d.ts so typescript knows about that. Once declared, no dependency injection is needed. Following is a code snippet I have used in a random Component function.

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    private _platform: Platform
  ) {
    this._platform.ready().then(() => {

      // ========== We need this part
      cordovaHTTP.put('http://192.168.0.5:8081/test-route', {
        really: "Yea!"
      }, {}, (res: any) => {
        console.log(res);
      }, (err: any) => {
        console.log(err);
      });
      // ========== till here, as for the example of usage
    });
  }

}

Solution

  • Option 1:

    The cordova-http plugin only support GET and POST, so if you want to use PUT install the plugin directly from the author who made the pull request repo https://github.com/spuentesp/cordova-HTTP using this command ionic plugin add https://github.com/spuentesp/cordova-HTTP

    but there is no implemented declaration for these APIs from ionic-native, so you can declare cordovaHTTP namespace in declarations.d.ts and use the API you want

    Option 2:

    Use the Http service in angular

    this.http.put(url, JSON.stringify(hero), {headers: headers}).map(res => res.json());
    

    Http class doc https://angular.io/docs/ts/latest/api/http/index/Http-class.html