Migrating Ionic 3 to Ionic 5 API

Question

Hello i have an Ionic 3 project and i want to migrate to Ionic 5. I know about the components but i am having a problem with Http which is no longer supported.

I used to call the .ts functions to call data from API like this

import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions } from '@angular/http';
import { AppData } from '../../providers/app-data/app-data';

 @Injectable()
 export class UserData {

options: any;
api_signature: string = '';

constructor(
    public http: Http,
    public device: Device,
    public events: Events
) {

    let headers = new Headers({
        'Content-Type': 'application/x-www-form-urlencoded'
    });
    this.options = new RequestOptions({
        headers: headers
    });
}

and function as

allUsers(offset: number) {
    let url = this.appData.getApiUrl() + 'allUsers';
        let data = this.jsonToURLEncoded({
            offset:offset
        });
        return this.http.post(url, data, this.options);
}

Now i call the http as HttpClient like this. But i am having trouble with RequestOptions is redlighted ana says can't find module which i know is not longer supported

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';
import { AppData } from '../app-data/app-data';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class UserData {
  options: any;

 constructor(
public storage: Storage,
public appData: AppData,
public http: HttpClient,
) { 
let headers = new Headers({
  'Content-Type': 'application/x-www-form-urlencoded'
});
 this.options = new RequestOptions({
  headers: headers
});

}

and the function like this

 allUsers(offset: number) {
    const url = this.appData.getApiUrl() + 'allUsers';
    const data = this.jsonToURLEncoded({
      offset: offset
    });
    return this.http.post(url, data, this.options);
  }

I also have a problem with rxjs and map. This is how i call functions in .ts to get data from api

allUsersSet() {
this.userData.allUsers(this.offset)
  .map(res => res.json())
  .subscribe(data => {
    if (data.success) {
      const temp = data.usersFeed;
      this.allUsers = temp;
    }

  });
 }

.map is redlined and says does not exist on Observable i put

import { map } from 'rxjs/operators';

but .map still an error

i did this

allUsersSet() {
this.userData.allUsers(this.offset)
map((data: any) => {
    if (data.success) {
      const temp = data.usersFeed;
      this.allUsers = temp;
    }

  });
 }

i don't get an error but api call doesn't show in Inspect/ Network/XHR tab

Any help?

Answer 1

Try using HttpHeaders instead of RequestOptions

import { HttpHeaders } from '@angular/common/http';

this.options = new HttpHeaders({
   'Content-Type': 'application/x-www-form-urlencoded'
});

And then use it like this:

return this.http.post(url, data, this.options);

You can check out documentation on the newer version of the api here: https://angular.io/guide/http

Your map issue, you need to use pipe

this.userData.allUsers(this.offset).pipe(
   map((data: any) => {
      if (data.success) {
         const temp = data.usersFeed;
         this.allUsers = temp;
      }
   })
);

Observable docs here: https://rxjs-dev.firebaseapp.com/guide/operators

The API won't be called unless you call .subscribe()

this.userData.allUsers(this.offset).pipe(map()).subscribe()