Basic Alert Throws Exception

Ionic Framework ionic-v3
1

Hi, I’m trying to add a basic alert to my code below but I’m getting an exception:

EXCEPTION: TypeError: this.nav.present is not a function

The console.log(“Login Failed!”, error) correctly shows the error coming back from Firebase, but the ionic alert doesn’t work (by the way, Firebase authentication works as expected)

Any ideas?

import {IonicApp, Page, NavController, Alert} from 'ionic/ionic';
import {TabsPage} from '../tabs/tabs';
import {SignupPage} from '../signup/signup';
import {UserData} from '../../providers/user-data';

@Page({
  templateUrl: 'build/pages/login/login.html'
})
export class LoginPage {
  constructor(nav: NavController, userData: UserData) {
    this.nav = nav;
    this.userData = userData;
    this.login = {};
    this.submitted = false;
  }

  onLogin(form) {
    this.submitted = true;
    if (form.valid) {
        this.userData.login();          
      /* Authenticate User with Firebase */
      var ref = this.userData.firebaseRef();
      ref.authWithPassword({
        email    : form.controls.username.value,
        password : form.controls.password.value
      }, this.authHandler);
    }
  }
  
  authHandler(error, authData) {
    if (error) {
        console.log("Login Failed!", error);
        let alert = Alert.create({
          title: 'Login Failed!',
          subTitle: error,
          buttons: ['Ok']
        });
        this.nav.present(alert);
    } else {
        console.log(authData);
        this.nav.push(TabsPage);
    }
  }
  
  onSignup() {
    console.log("testing signup");
    this.nav.push(SignupPage);
  }
  
}
2

For anybody else struggling with this issue, here’s how I got it to work

1 Like