@ionic-native/Facebook undefined - not being passed to constructor?

Ionic Native
1

I’m running my app on my android device, and when I click on my Facebook login button, I get the error

Error: Uncaught (in promise): TypeError: Cannot read property 'fb' of undefined

My page:

...
import { Facebook } from '@ionic-native/facebook';
...
constructor(public fb: Facebook, ...
...
LoginFacebook(event, item)
{
    console.log("click facebook login");
    this.fb.getLoginStatus()
...

I’ve followed every suggestion I can google. I’ve removed the cordova-plugin-facebook4 and then added it back, I’ve installed @ionic-native/Facebook correctly as far as I can tell. I’ve imported Facebook into app.module and added it to Providers.

I don’t know why it thinks this.fb is undefined?

2

Hmmm. What does your button code look like?

3

it fails right at the start, at the this.fb.getLoginStatus:

LoginFacebook(event, item)
	{
		this.ShowLoading("Signing In...");
		
		console.log("click facebook login");
		this.fb.getLoginStatus()
					.then(function(response)
					{
						if (response.status == "connected")
						{
							this.XyzApi.GetSocialAccessToken(IdentityProvider.Facebook, response.authResponse.userID)
										.map((tokenSaved: boolean) =>
										{
											if (!tokenSaved)
											{
												//They've authorized the app, but we couldn't get an access token for them, means somehow registration failed
												this.CreateFacebookUser(response);
											}
											else
											{
												//We have everything we need to show their dashboard
												this.navCtrl.setRoot(DashboardPage);
											}
										});
							return;
						}

						//It's not_authorized or unknown, so login
						this.fb.login(this.XyzApi.FB_PERMISSIONS)
								.then(function (response)
								{
									this.CreateFacebookUser(response);
								}, 
								function (error)
								{
									console.log(error);
								});
					});
	}
4

Ah, sorry. I meant in your template/HTML.

5

No worries:

<button ion-button block icon-left color="facebook" (tap)="LoginFacebook($event)" class="labeled"><ion-icon ios="logo-facebook" md="logo-facebook" name="logo-facebook"></ion-icon>Sign In With Facebook</button>

6

Is there any particular reason you’re using tap over click? I’m not sure if (or why) using tap would break things, but normally click is used.

7

You missed to import the plugin in you app.module.ts

Please read the documentations carefully

1 Like
8

Never type the word “function” inside the body of one. Always use arrow functions instead. I suspect you are losing execution context.

9

ugh, this was it. the stupid sample I copied it from used a function and I’m still new to this and didn’t notice. Thanks!