Ionic 3 Login Authentication Using API - Cannot read property 'json' of null

Question

I am doing authentication in Ionic 3 using API but In the login process, it is showing error: Cannot read property \'json\' of null

This is my provi

Answer 1

The problem is in your restapi.ts constructor, HttpClient causing the issue;

  constructor(public http: HttpClient) {
    console.log('Hello RestapiProvider Provider');
  }

Change that to this,

  constructor(public http: Http) {
    // console.log('Hello RestapiProvider Provider');
  }

You have an error on this part {headers: headers} here is your error :

Argument of type '{ headers: Headers; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'Headers'.

Error is pretty clean so does not need any explanation, your code will work without any issue if you do that change. I tested on my local.

Answer 2

Please change the method like this

In your ts rest.api.ts File

getUsers(credentials, type) {
    return new Promise((resolve, reject) => {
      var headers = new Headers();
      headers.append('Access-Control-Allow-Origin' , '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
      headers.append('Accept','application/json');
      headers.append('content-type','application/json');

      this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
        .subscribe(res => {
          resolve(res); ----- Change like this
        }, (err) => {
          reject(err);
        });
    });
  }

in your loginpage.ts file

   getloginUsers(){
    this.restProvider.getUsers(this.userData,'user_Login').then((result) => {
    if(result){
     this.responseData = result.json();
     if(this.responseData.userData){
     console.log(this.responseData);
     console.log("User Details");
     this.navCtrl.push(ListPage);
     }
     else{
       console.log("Incorrect Details"); }
    }
     }
     , (err) => {
     // Error log
   });

 }

Answer 3

First:

ngModel work if you addition FormsModule in config file.

@NgModule({
  declarations: [ MyApp ],
  imports: [
    FormsModule
    ...
  )],
  bootstrap: [...],
  entryComponents: [ ... ],
  providers: []
})

Second:

Send data as JSON format, add Content-Type:

getUsers(credentials, type) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  return this.http
          .post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
          .map(res => res.json());
}

and call in loginpage (without Promise)

this.restProvider.getUsers(this.userData,'user_Login')
    .subscribe(res => this.responseData = result);

Third:

Back-end must return success value. If your API has error (no valid email, password) return HTTP error to Client.

---

CORS headers must be implementation on the Server Part.

Answer 4

Also, wouldn't it be easier to just return observable instead of a promise?

return this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers});