I am developing a simple maid android based app using Ionic framework and I use laravel for my backend. I am getting ‘Response with status: 0 for URL: null’ this error when I run it in web or android simulator.
I could not be able to register a new user, when I used POSTMAN to check my restful API it works and I could be a able to register a new user. But when I run this app in simulator it keep on showing this ‘Response with status: 0 for URL: null’ error.
**auth-service.ts file**
import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http'
import 'rxjs/add/operator/map';
let apiUrl = 'http://fypBackend.test/api/';
@Injectable({
providedIn: 'root'
})
export class AuthServiceService {
constructor(public http: Http) { }
register(data){
return new Promise((resolve, reject) => {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
this.http.post(apiUrl+'users', JSON.stringify(data), {headers: headers})
.subscribe(res => {
resolve(res.json());
}, (err) => {
console.log('Not Working')
reject(err);
});
});
}
}
**register.ts file**
import { Component} from '@angular/core';
import { NavController,LoadingController, ToastController } from '@ionic/angular';
import {AuthServiceService} from '../auth-service.service';
@Component({
selector: 'page-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage{
loading: any;
regData = {name: '', icNumber: '', email: '',
password: '', phone: '', address: '',
cityState: '', houseType: '', category:''};
constructor(public navCtrl: NavController, public authService: AuthServiceService, public loadingCtr: LoadingController, private toastCtrl: ToastController) { }
doSignup(){
this.authService.register(this.regData).then((result)=>{
this.loading.dismiss();
this.navCtrl.pop();
}, (err) => {
this.presentToast(err);
});
}
async presentToast(msg){
const toast = await this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'top',
color: 'dark',
});
toast.present();
}
}
**register.html file**
<ion-content padding>
<h2>Register Here</h2>
<form (submit) = "doSignup()">
<ion-item>
<ion-label stacked>Username</ion-label>
<ion-input [(ngModel)] = "regData.name" name = "name" type="text" placeholder = "Your Name"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>IC-Number</ion-label>
<ion-input [(ngModel)] = "regData.icNumber" name = "icNumber" type="number" placeholder = "Your IC-Number"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>E-mail</ion-label>
<ion-input [(ngModel)] = "regData.email" name = "email" type="email" placeholder = "Your E-Mail"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Password</ion-label>
<ion-input [(ngModel)] = "regData.password" name = "password" type="password" placeholder = "Your Password"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Handphone Number</ion-label>
<ion-input [(ngModel)] = "regData.phone" name = "phone" type="tel" placeholder = "Your Phone Number"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Address</ion-label>
<ion-input [(ngModel)] = "regData.address" name = "address" type="text" placeholder = "Your Address"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>City/State</ion-label>
<ion-input [(ngModel)] = "regData.cityState" name = "cityState" type="text" placeholder = "Your City/State"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>House Type</ion-label>
<ion-input [(ngModel)] = "regData.houseType" name = "houseType" type="text" placeholder = "Your House Type"></ion-input>
</ion-item>
<ion-item>
<ion-label stacked>Category</ion-label>
<ion-select [(ngModel)] = "regData.category" name = "category" type="text" placeholder = "Your Category">
<ion-select-option value="1" selected>Maid</ion-select-option>
<ion-select-option value="2" selected>Customer</ion-select-option>
</ion-select>
</ion-item>
<button ion-button block type = "submit">
SignUp
</button>
</form>
</ion-content>