ToastController causing page not to load when app deployed to Ionic View(Pro)

Ionic Framework ionic-v3
#1

I have a signup page (signup.ts) which takes a ToastController in the constructor. I deployed the app in Ionic View and when I access it in device, the page does not seem to load or it does not redirect me to signup page (from home page). So I decided to remove(one by one) some of this injected dependencies in the signup page and comment out any reference to this dependency. So I started removing the ToastController and deploy the app. I tested in device and I am able to navigate to signup page.

Is there anything I need to configure the ToastController?

#2

How exactly do you think someone can answer your question without seeing any of your code? If you use ToastController consistent with the code examples in the Ionic API, it will work.

#3

@AaronSterling below is the code. Page does not load in Ionic View. Removing the ToastController will load the page.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController, ToastController } from 'ionic-angular';
import { UserProvider } from '../../providers/user/user';

@IonicPage()
@Component({
  selector: 'page-signup',
  templateUrl: 'signup.html',
})
export class SignupPage {
  newuser = {
    email: '',
    password: '',
    displayName: ''
  }
  constructor(public navCtrl: NavController, public navParams: NavParams, public userservice: UserProvider,
              public loadingCtrl: LoadingController, public toastCtrl: ToastController) {
  }

  signup() {
    var toaster = this.toastCtrl.create({
      duration: 3000,
      position: 'bottom'
    });
    if (this.newuser.email == '' || this.newuser.password == '' || this.newuser.displayName == '') {
      toaster.setMessage('All fields are required');
      toaster.present();
    }
    else if (this.newuser.password.length < 7) {
      toaster.setMessage('Weak password. Try giving more than six characters');
      toaster.present();
    }
    else {
      let loader = this.loadingCtrl.create({
        content: 'Please wait'
      });
      loader.present();
      this.userservice.adduser(this.newuser).then((res: any) => {
        loader.dismiss();
        if (res.success)
          this.navCtrl.push('SignupPicturePage');
        else
          alert('Error' + res);
      })
    }
  }

  goback() {
    this.navCtrl.setRoot('LoginPage');
  }

}
#4

You sure the loader isn’t the issue? You’re executing before you get an ack from present().

#5

I don’t think so because if I change the signup to code below (without the ToastController), the page loads.

signup() {
      let loader = this.loadingCtrl.create({
        content: 'Please wait'
      });
      loader.present();
      this.userservice.adduser(this.newuser).then((res: any) => {
        loader.dismiss();
        if (res.success)
          this.navCtrl.push('SignupPicturePage');
        else
          alert('Error' + res);
      })
  }
#6

FYI if you use code format, it’s much easier to read your posts.

EDIT: I haven’t checked the source. Is there a working setMessage command? It isn’t in the API.

I have a toastHelper() private method that takes a message string as input, and creates and presents the toast all at once. You might try things that way – make everything more modular. Also, good style: use let, don’t use var. Actually, you probably should never use var ever again, since ES2015.

#7

Please edit your post, it is not very readable at the moment.
Use the </> button above the input field to format your code, command line output or error message (select the text first, then click the button or wrap it in ``` manually). Check the preview if it looks better. This will make sure your text is readable and if it recognizes the programming language it also automatically adds code syntax highlighting. Thanks.

Does your app work in ionic serve?

#8

@AaronSterling Noted on the use of var. Thanks!

#9

@Sujan12 Yes, app works with ionic serve

#10

Ok. Can you build the app yourself with ionic cordova build android or ios?
Is only this one page broken in Ionic View or the complete app?

#11

I did a build with ionic cordova build android. It gave me error:

Error: Could not find gradle wrapper within Android SDK. Might need to update your Android SDK

So I googled that error. Long story short, I have to do a cordova platform update android@6.2.3

And that seem to fix the error on ionic cordova build android. Deployed the app and page now loads in device.

1 Like
#12

Damn, should have asked for your ionic info directly - would have shown this.

#13

The one time that it wasn’t your first question :smile:

2 Likes