For hours I've been searching for a solution to this problem in my project to no avail. I've read many of the other "Cannot read property ... of undefined" posts, but can't seem to find a solution for mine.
Below is the relevant code in my project.
This is an Ionic 2 / Apache Cordova project and the page below is the Sign In Page for the app. It is not one of the core app components, it is simply a regular page.
For some reason, the NavController is not being recognized in the onSignIn() method, but I have no idea why. I've injected NavController in the constructor, and it doesn't look like I am failing to follow any known procedure that I am aware of, but it's still failing every time.
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);
});
}
}
try like the below code:
I think you are facing the problem because of the scope of
this
. In your case scope ofthis
belongs to the function which is passed insidethen
.A better way to solve this issue would be by using arrow functions:
So your issue would be solved by just changing the
onSignIn
method like this:Notice the
(result) => {...}
instead of thefunction(result) {...}