I have been struggling for hours to find a solution to the issue in my project. Despite reading several other posts on the "Cannot read property ... of undefined" error, I am unable to resolve it.
Below is the relevant code snippet from my Ionic 2 / Apache Cordova project. The page mentioned is the Sign In Page for the app, which is not part of the core components but a regular page.
The problem lies in the inability of the NavController to be recognized within the onSignIn() method. Even though I have injected NavController in the constructor and followed all necessary procedures, the function fails every time without any clear reason.
import firebase from 'firebase';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { HomePage } from './../home/home';
var provider = new firebase.auth.FacebookAuthProvider();
@Component({
selector: 'page-signin',
templateUrl: 'signin.html',
})
export class SignInPage {
constructor(public navCtrl: NavController, public params: NavParams) {}
onSignIn() {
firebase.auth().signInWithPopup(provider).then(function(result) {
console.log(result.credential.accessToken);
console.log(result.user.displayName);
this.navCtrl.setRoot(HomePage);
}).catch(function(error) {
console.log(error.message);
});
}
}