Facebook login in ionic

Ionic Native
1

Hi,
I am new to ionic and using ionic 3.9.2 framework. In my app I want to integrate facebook authentication/login . For this I followed the lionk
http://ionicframework.com/docs/native/facebook/.
But I am getting the error
"Runtime Error
Unexpected value ‘Facebook’ declared by the module ‘AppModule’. Please add a @Pipe/@Directive/@Component annotation."
Can any one help me to solve the issue. Its urgent.

Thanks…

2

can you show your app.module.ts file?

3

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { HttpModule } from ‘@angular/http’;
import { IonicStorageModule } from ‘@ionic/storage’;
import { Facebook } from ‘@ionic-native/facebook’

import { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { ListPage } from ‘…/pages/list/list’;

import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

@NgModule({
declarations: [
MyApp,
HomePage,
Facebook,
ListPage

],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

4

remove Facebook in ngmodule add it into the provider

Like

@NgModule({
declarations: [
MyApp,
HomePage,

ListPage

],
imports: [
BrowserModule,
HttpModule,	
IonicModule.forRoot(MyApp),
IonicStorageModule.forRoot()
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
Facebook,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
5

Thank you for the fast response…
Now showing another error
"Typescript Error
Cannot find name ‘FacebookLoginResponse’.
D:/Ionic/SimBing/src/pages/home/home.ts
.then((res: FacebookLoginResponse) => console.log(‘Logged into Facebook!’, res))
.catch(e => console.log(‘Error logging into Facebook’, e));
"

6

You just add the page import statement as

import { Facebook, FacebookLoginResponse } from ‘@ionic-native/facebook’;

7

HI, @divyanaireficaz

Could you try like:

component file

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {Facebook, FacebookLoginResponse} from '@ionic-native/facebook';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
providers : [Facebook]
})
export class HomePage {

constructor(public navCtrl : NavController, public fb : Facebook) {

  }
  facebook(){
    this.fb.login(['public_profile', 'user_friends', 'email'])
    .then((res : FacebookLoginResponse)=>{
        console.log('Logged into Facebook!', res)
        alert(JSON.stringify(res));
    })
    .catch(e => {
        console.log('Error logging into Facebook', e)
    });
  }
}

Hope this will solve your issue

Thanks,

8

Hi,
Thanks again for your support. I have tried to import the facebook like the same and use the code as @addwebsolution. Now all errors are gone but no event firing happening while clicking on the login button.
One more doubt whether there is any chance that the login works only on android or ios device?

9

Thank you very much. I tried the code errors are gone but no event firing happening there. One more doubt whether there is any chance that the login works only on android or ios device?

10

Hi, @divyanaireficaz

Yes, it will work with IOS and Android and regarding issue with event firing, Please check this in device as this is cordova plugin so it will work in device only.

Thanks,