ionic4 - authService returns no value

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I am very new to Ionic and Angular. I am following a tutorial where Ionic 2 is used but, I am using ionic 4 I guess i.e, I use HttpClient module instead of Http module and so on.

I am creating a signup page. When I try to fill all the credentials and press signup button. Nothing Happens. When I view my Console log, it shows me "Connection Failed", which is err part of my signup.ts

Please help to resolve this issue.

Here is my code:

signup.html

<ion-content padding>

<ion-list>



    <ion-item>

        <ion-label floating>Name</ion-label>

        <ion-input type="text" [(ngModel)]="userData.name"></ion-input>

      </ion-item>



      <ion-item>

          <ion-label floating>Email</ion-label>

          <ion-input type="text" [(ngModel)]="userData.email"></ion-input>

        </ion-item>



    <ion-item>

      <ion-label floating>Username</ion-label>

      <ion-input type="text" [(ngModel)]="userData.username"></ion-input>

    </ion-item>



    <ion-item>

      <ion-label floating>Password</ion-label>

      <ion-input type="password" [(ngModel)]="userData.password"></ion-input>

    </ion-item>



  </ion-list>



  <button ion-button full color="secondary" (click)="signup()">Sign Up</button>

signup.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AuthServiceProvider } from './../../providers/auth- 

service/auth-service';

import { TabsPage } from './../tabs/tabs';





@IonicPage()

@Component({

  selector: 'page-signup',

  templateUrl: 'signup.html',

})

export class SignupPage {

  responseData: any;

  userData = {"username":"", "password":"", "email":"", "name":""};



  constructor(public navCtrl: NavController, public navParams: 

NavParams, public authService: AuthServiceProvider) {

  }



  ionViewDidLoad() {

    console.log('ionViewDidLoad SignupPage');

  }



  signup(){

    //api Connections

    this.authService.postData(this.userData, "signup").then((result) => 

{

      this.responseData = result;

      console.log(this.responseData);

     // localStorage.setItem('userData', 

JSON.stringify(this.responseData))

      this.navCtrl.push(TabsPage);

    }, (err)=>{

      console.log("Connection Failed");

    });

  }



}

auth-service.ts

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

import { Injectable } from '@angular/core';



let apiUrl ="http://localhost/PHP-Slim-Restful/api/";





@Injectable()

export class AuthServiceProvider {



  constructor(public http: HttpClient) {

    console.log('Hello AuthServiceProvider Provider');

  }





  postData(credentials, type) {

    return new Promise((resolve, reject)=>{

      let headers = new HttpHeaders();



      this.http.post(apiUrl + type, JSON.stringify(credentials), 

{headers: headers})

      .subscribe(res=>{

        resolve(res);

      }, (err)=>{

        reject(err);

      });

    });



  }



}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic- 

angular';

import { MyApp } from './app.component';

import { AuthServiceProvider } from '../providers/auth-service/auth- 

service';

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



import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';



import { SignupPage } from './../pages/signup/signup';

import { LoginPage } from './../pages/login/login';

import { WelcomePage } from './../pages/welcome/welcome';



import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';



@NgModule({

  declarations: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  imports: [

    BrowserModule, HttpClientModule,

    IonicModule.forRoot(MyApp)

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  providers: [

    StatusBar,

    SplashScreen, AuthServiceProvider,

    {provide: ErrorHandler, useClass: IonicErrorHandler},

    AuthServiceProvider

  ]

})

export class AppModule {}

edited Jan 3 at 11:10

asked Jan 3 at 8:20

Nirmal Sharavanan

please include the console output

– John Velasquez
Jan 3 at 8:30

Try printing the error which came from the Promise so that we can diagnose more. console.log("Connection Failed", err);

– Adrian
Jan 3 at 8:31

Thank you for your response. I have added console.log("Connection Failed", err); and here is the console response, i.stack.imgur.com/fFsWW.png

– Nirmal Sharavanan
Jan 3 at 11:07

I have noted that sometimes my database is updating properly with the credentials I enter in the signup page.

– Nirmal Sharavanan
Jan 3 at 12:27

Thank you. I have found out the problem. The problem was with API file in the server. Now its working nice.

– Nirmal Sharavanan
Jan 4 at 8:48

add a comment |

I am very new to Ionic and Angular. I am following a tutorial where Ionic 2 is used but, I am using ionic 4 I guess i.e, I use HttpClient module instead of Http module and so on.

Please help to resolve this issue.

Here is my code:

signup.html

<ion-content padding>

<ion-list>



    <ion-item>

        <ion-label floating>Name</ion-label>

        <ion-input type="text" [(ngModel)]="userData.name"></ion-input>

      </ion-item>



      <ion-item>

          <ion-label floating>Email</ion-label>

          <ion-input type="text" [(ngModel)]="userData.email"></ion-input>

        </ion-item>



    <ion-item>

      <ion-label floating>Username</ion-label>

      <ion-input type="text" [(ngModel)]="userData.username"></ion-input>

    </ion-item>



    <ion-item>

      <ion-label floating>Password</ion-label>

      <ion-input type="password" [(ngModel)]="userData.password"></ion-input>

    </ion-item>



  </ion-list>



  <button ion-button full color="secondary" (click)="signup()">Sign Up</button>

signup.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AuthServiceProvider } from './../../providers/auth- 

service/auth-service';

import { TabsPage } from './../tabs/tabs';





@IonicPage()

@Component({

  selector: 'page-signup',

  templateUrl: 'signup.html',

})

export class SignupPage {

  responseData: any;

  userData = {"username":"", "password":"", "email":"", "name":""};



  constructor(public navCtrl: NavController, public navParams: 

NavParams, public authService: AuthServiceProvider) {

  }



  ionViewDidLoad() {

    console.log('ionViewDidLoad SignupPage');

  }



  signup(){

    //api Connections

    this.authService.postData(this.userData, "signup").then((result) => 

{

      this.responseData = result;

      console.log(this.responseData);

     // localStorage.setItem('userData', 

JSON.stringify(this.responseData))

      this.navCtrl.push(TabsPage);

    }, (err)=>{

      console.log("Connection Failed");

    });

  }



}

auth-service.ts

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

import { Injectable } from '@angular/core';



let apiUrl ="http://localhost/PHP-Slim-Restful/api/";





@Injectable()

export class AuthServiceProvider {



  constructor(public http: HttpClient) {

    console.log('Hello AuthServiceProvider Provider');

  }





  postData(credentials, type) {

    return new Promise((resolve, reject)=>{

      let headers = new HttpHeaders();



      this.http.post(apiUrl + type, JSON.stringify(credentials), 

{headers: headers})

      .subscribe(res=>{

        resolve(res);

      }, (err)=>{

        reject(err);

      });

    });



  }



}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic- 

angular';

import { MyApp } from './app.component';

import { AuthServiceProvider } from '../providers/auth-service/auth- 

service';

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



import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';



import { SignupPage } from './../pages/signup/signup';

import { LoginPage } from './../pages/login/login';

import { WelcomePage } from './../pages/welcome/welcome';



import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';



@NgModule({

  declarations: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  imports: [

    BrowserModule, HttpClientModule,

    IonicModule.forRoot(MyApp)

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  providers: [

    StatusBar,

    SplashScreen, AuthServiceProvider,

    {provide: ErrorHandler, useClass: IonicErrorHandler},

    AuthServiceProvider

  ]

})

export class AppModule {}

edited Jan 3 at 11:10

asked Jan 3 at 8:20

Nirmal Sharavanan

please include the console output

– John Velasquez
Jan 3 at 8:30

Try printing the error which came from the Promise so that we can diagnose more. console.log("Connection Failed", err);

– Adrian
Jan 3 at 8:31

Thank you for your response. I have added console.log("Connection Failed", err); and here is the console response, i.stack.imgur.com/fFsWW.png

– Nirmal Sharavanan
Jan 3 at 11:07

I have noted that sometimes my database is updating properly with the credentials I enter in the signup page.

– Nirmal Sharavanan
Jan 3 at 12:27

Thank you. I have found out the problem. The problem was with API file in the server. Now its working nice.

– Nirmal Sharavanan
Jan 4 at 8:48

add a comment |

I am very new to Ionic and Angular. I am following a tutorial where Ionic 2 is used but, I am using ionic 4 I guess i.e, I use HttpClient module instead of Http module and so on.

Please help to resolve this issue.

Here is my code:

signup.html

<ion-content padding>

<ion-list>



    <ion-item>

        <ion-label floating>Name</ion-label>

        <ion-input type="text" [(ngModel)]="userData.name"></ion-input>

      </ion-item>



      <ion-item>

          <ion-label floating>Email</ion-label>

          <ion-input type="text" [(ngModel)]="userData.email"></ion-input>

        </ion-item>



    <ion-item>

      <ion-label floating>Username</ion-label>

      <ion-input type="text" [(ngModel)]="userData.username"></ion-input>

    </ion-item>



    <ion-item>

      <ion-label floating>Password</ion-label>

      <ion-input type="password" [(ngModel)]="userData.password"></ion-input>

    </ion-item>



  </ion-list>



  <button ion-button full color="secondary" (click)="signup()">Sign Up</button>

signup.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AuthServiceProvider } from './../../providers/auth- 

service/auth-service';

import { TabsPage } from './../tabs/tabs';





@IonicPage()

@Component({

  selector: 'page-signup',

  templateUrl: 'signup.html',

})

export class SignupPage {

  responseData: any;

  userData = {"username":"", "password":"", "email":"", "name":""};



  constructor(public navCtrl: NavController, public navParams: 

NavParams, public authService: AuthServiceProvider) {

  }



  ionViewDidLoad() {

    console.log('ionViewDidLoad SignupPage');

  }



  signup(){

    //api Connections

    this.authService.postData(this.userData, "signup").then((result) => 

{

      this.responseData = result;

      console.log(this.responseData);

     // localStorage.setItem('userData', 

JSON.stringify(this.responseData))

      this.navCtrl.push(TabsPage);

    }, (err)=>{

      console.log("Connection Failed");

    });

  }



}

auth-service.ts

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

import { Injectable } from '@angular/core';



let apiUrl ="http://localhost/PHP-Slim-Restful/api/";





@Injectable()

export class AuthServiceProvider {



  constructor(public http: HttpClient) {

    console.log('Hello AuthServiceProvider Provider');

  }





  postData(credentials, type) {

    return new Promise((resolve, reject)=>{

      let headers = new HttpHeaders();



      this.http.post(apiUrl + type, JSON.stringify(credentials), 

{headers: headers})

      .subscribe(res=>{

        resolve(res);

      }, (err)=>{

        reject(err);

      });

    });



  }



}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic- 

angular';

import { MyApp } from './app.component';

import { AuthServiceProvider } from '../providers/auth-service/auth- 

service';

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



import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';



import { SignupPage } from './../pages/signup/signup';

import { LoginPage } from './../pages/login/login';

import { WelcomePage } from './../pages/welcome/welcome';



import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';



@NgModule({

  declarations: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  imports: [

    BrowserModule, HttpClientModule,

    IonicModule.forRoot(MyApp)

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  providers: [

    StatusBar,

    SplashScreen, AuthServiceProvider,

    {provide: ErrorHandler, useClass: IonicErrorHandler},

    AuthServiceProvider

  ]

})

export class AppModule {}

edited Jan 3 at 11:10

asked Jan 3 at 8:20

Nirmal Sharavanan

I am very new to Ionic and Angular. I am following a tutorial where Ionic 2 is used but, I am using ionic 4 I guess i.e, I use HttpClient module instead of Http module and so on.

Please help to resolve this issue.

Here is my code:

signup.html

<ion-content padding>

<ion-list>



    <ion-item>

        <ion-label floating>Name</ion-label>

        <ion-input type="text" [(ngModel)]="userData.name"></ion-input>

      </ion-item>



      <ion-item>

          <ion-label floating>Email</ion-label>

          <ion-input type="text" [(ngModel)]="userData.email"></ion-input>

        </ion-item>



    <ion-item>

      <ion-label floating>Username</ion-label>

      <ion-input type="text" [(ngModel)]="userData.username"></ion-input>

    </ion-item>



    <ion-item>

      <ion-label floating>Password</ion-label>

      <ion-input type="password" [(ngModel)]="userData.password"></ion-input>

    </ion-item>



  </ion-list>



  <button ion-button full color="secondary" (click)="signup()">Sign Up</button>

signup.ts

import { Component } from '@angular/core';

import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { AuthServiceProvider } from './../../providers/auth- 

service/auth-service';

import { TabsPage } from './../tabs/tabs';





@IonicPage()

@Component({

  selector: 'page-signup',

  templateUrl: 'signup.html',

})

export class SignupPage {

  responseData: any;

  userData = {"username":"", "password":"", "email":"", "name":""};



  constructor(public navCtrl: NavController, public navParams: 

NavParams, public authService: AuthServiceProvider) {

  }



  ionViewDidLoad() {

    console.log('ionViewDidLoad SignupPage');

  }



  signup(){

    //api Connections

    this.authService.postData(this.userData, "signup").then((result) => 

{

      this.responseData = result;

      console.log(this.responseData);

     // localStorage.setItem('userData', 

JSON.stringify(this.responseData))

      this.navCtrl.push(TabsPage);

    }, (err)=>{

      console.log("Connection Failed");

    });

  }



}

auth-service.ts

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

import { Injectable } from '@angular/core';



let apiUrl ="http://localhost/PHP-Slim-Restful/api/";





@Injectable()

export class AuthServiceProvider {



  constructor(public http: HttpClient) {

    console.log('Hello AuthServiceProvider Provider');

  }





  postData(credentials, type) {

    return new Promise((resolve, reject)=>{

      let headers = new HttpHeaders();



      this.http.post(apiUrl + type, JSON.stringify(credentials), 

{headers: headers})

      .subscribe(res=>{

        resolve(res);

      }, (err)=>{

        reject(err);

      });

    });



  }



}

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic- 

angular';

import { MyApp } from './app.component';

import { AuthServiceProvider } from '../providers/auth-service/auth- 

service';

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



import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';



import { SignupPage } from './../pages/signup/signup';

import { LoginPage } from './../pages/login/login';

import { WelcomePage } from './../pages/welcome/welcome';



import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';



@NgModule({

  declarations: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  imports: [

    BrowserModule, HttpClientModule,

    IonicModule.forRoot(MyApp)

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    AboutPage,

    ContactPage,

    HomePage,

    WelcomePage,

    LoginPage,

    SignupPage,

    TabsPage

  ],

  providers: [

    StatusBar,

    SplashScreen, AuthServiceProvider,

    {provide: ErrorHandler, useClass: IonicErrorHandler},

    AuthServiceProvider

  ]

})

export class AppModule {}

angular ionic-framework ionic4

edited Jan 3 at 11:10

asked Jan 3 at 8:20

Nirmal Sharavanan

edited Jan 3 at 11:10

asked Jan 3 at 8:20

Nirmal Sharavanan

edited Jan 3 at 11:10

asked Jan 3 at 8:20

Nirmal Sharavanan

asked Jan 3 at 8:20

Nirmal Sharavanan

asked Jan 3 at 8:20

Nirmal Sharavanan

please include the console output

– John Velasquez
Jan 3 at 8:30

Try printing the error which came from the Promise so that we can diagnose more. console.log("Connection Failed", err);

– Adrian
Jan 3 at 8:31

Thank you for your response. I have added console.log("Connection Failed", err); and here is the console response, i.stack.imgur.com/fFsWW.png

– Nirmal Sharavanan
Jan 3 at 11:07

I have noted that sometimes my database is updating properly with the credentials I enter in the signup page.

– Nirmal Sharavanan
Jan 3 at 12:27

Thank you. I have found out the problem. The problem was with API file in the server. Now its working nice.

– Nirmal Sharavanan
Jan 4 at 8:48

add a comment |

please include the console output

– John Velasquez
Jan 3 at 8:30

Try printing the error which came from the Promise so that we can diagnose more. console.log("Connection Failed", err);

– Adrian
Jan 3 at 8:31

Thank you for your response. I have added console.log("Connection Failed", err); and here is the console response, i.stack.imgur.com/fFsWW.png

– Nirmal Sharavanan
Jan 3 at 11:07

I have noted that sometimes my database is updating properly with the credentials I enter in the signup page.

– Nirmal Sharavanan
Jan 3 at 12:27

Thank you. I have found out the problem. The problem was with API file in the server. Now its working nice.

– Nirmal Sharavanan
Jan 4 at 8:48

please include the console output

– John Velasquez
Jan 3 at 8:30

Try printing the error which came from the Promise so that we can diagnose more. console.log("Connection Failed", err);

– Adrian
Jan 3 at 8:31

Thank you for your response. I have added console.log("Connection Failed", err); and here is the console response, i.stack.imgur.com/fFsWW.png

– Nirmal Sharavanan
Jan 3 at 11:07

I have noted that sometimes my database is updating properly with the credentials I enter in the signup page.

– Nirmal Sharavanan
Jan 3 at 12:27

Thank you. I have found out the problem. The problem was with API file in the server. Now its working nice.

– Nirmal Sharavanan
Jan 4 at 8:48

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54018598%2fionic4-authservice-returns-no-value%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu