Hi everyone! I recently started developing ionic, and I’m still learning, and now I’ve faced an issue:
I’ve followed this tutorial: https://ionicframework.com/docs/native/facebook but it doesn’t seem to work, I tried to find solutions online but none of them worked… can someone help me?
My login.ts
import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { IonicPage, NavController, ToastController } from 'ionic-angular';
import { User } from '../../providers';
import { MainPage } from '../';
import { HttpClient } from '@angular/common/http';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage implements OnInit {
// The account fields for the login form.
// If you're using the username field with or without email, make
// sure to add it to the type
account: { usuario: string, password: string } = {
usuario: '',
password: ''
};
constructor(public navCtrl: NavController,
public user: User,
public toastCtrl: ToastController,
public translateService: TranslateService,
public http: HttpClient,
private fb: Facebook) {}
ngOnInit(){}
// Attempt to login in through our User service
doLogin() {
this.user.login(this.account).subscribe((resp) => {
this.navCtrl.push(MainPage);
}, (err) => {
this.navCtrl.push(MainPage);
});
}
doFbLogin(){
this.fb.login(['public_profile', 'user_friends', 'email'])
.then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))
.catch(e => console.log('Error logging into Facebook', e));
}
}
login.html button
<button ion-button class=“button-login-facebook” (click)=“doFbLogin()”>Facebook
and my package.json
{
"name": "aaaaaaaaaaaaaaaaa",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/camera": "4.3.3",
"@ionic-native/core": "~4.20.0",
"@ionic-native/facebook": "^5.17.0",
"@ionic-native/native-storage": "^5.0.0",
"@ionic-native/splash-screen": "~4.20.0",
"@ionic-native/status-bar": "~4.20.0",
"@ionic/storage": "2.2.0",
"@ngx-translate/core": "8.0.0",
"@ngx-translate/http-loader": "^2.0.0",
"cordova": "^9.0.0",
"cordova-android": "^8.1.0",
"cordova-plugin-facebook4": "^6.2.0",
"cordova-plugin-nativestorage": "^2.3.2",
"es6-promise-plugin": "^4.2.2",
"ionic-angular": "3.9.5",
"ionic-plugin-navigation-bar-color": "^1.0.2",
"ionicons": "^3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"ts-md5": "^1.2.4",
"zone.js": "0.8.29"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.2",
"@ionic/lab": "2.0.13",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.1",
"cordova-plugin-navigationbar-color": "0.0.8",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-navigationbar-color": {},
"cordova-plugin-facebook4": {
"APP_ID": "erased cause I dont know if u guys can see this haha",
"APP_NAME": "cookcrawler",
"FACEBOOK_HYBRID_APP_EVENTS": "false",
"FACEBOOK_ANDROID_SDK_VERSION": "5.5.2"
},
"cordova-plugin-nativestorage": {}
},
"platforms": [
"android"
]
}
}
The error i’m getting:
ERROR TypeError: Object(...) is not a function
at Facebook.login (index.js:62)
at LoginPage.webpackJsonp.351.LoginPage.doFbLogin (login.ts:41)
at Object.eval [as handleEvent] (LoginPage.html:73)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at core.js:10629
at HTMLButtonElement.<anonymous> (platform-browser.js:2628)
at t.invokeTask (polyfills.js:3)
Facebook configs are ok, dependencies installed with appname and appid ok too.
Is probably a version error, but I dont know, please save meeeee!!!
