title: Native facebook login in ionic 2
body: <p>I am trying to use native  FB login in ionic 2 project using  cordova-plugin-facebook4. I am testing my app on an emulator which does not have a Facebook app installed. I have also installed cordova in-app browser plugin.But when I run  the app I get an error </p>
  
  <blockquote>
    <p>Uncaught (in promise): TypeError: Cannot read property 'apply' of
    undefined:Cannot read property of undefined  at callCordovaPlugin.</p>
  </blockquote>
  
  <p>My implementation was inspired from <a href="https://ionicthemes.com/tutorials/about/ionic2-facebook-login" rel="nofollow noreferrer">https://ionicthemes.com/tutorials/about/ionic2-facebook-login</a>
  I have added declare const facebookConnectPlugin: any;' to my declarations.d.ts file
  Still its not working?
  Help me out .</p>
  
  <p>This the code snippet of my <strong>home.ts</strong>.</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { Facebook } from '@ionic-native/facebook';
  
  @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
  })
  
  export class HomePage {
      FB_APP_ID: number = xxxxxxxxxxxx;
      constructor(public navCtrl: NavController, private fb: Facebook) {
          this.fb.browserInit(this.FB_APP_ID, "v2.8");
      }
      doFbLogin() {
          let permissions = new Array();
          let nav = this.navCtrl;
          //the permissions your facebook app needs from the user
          permissions = ["public_profile"];
          this.fb.login(permissions).then(function(response) {
              let userId = response.authResponse.userID;
              let params = new Array();
              //Getting name and gender properties
              this.fb.api("/" + userId + "/me?fields=name,gender", params).then(function(user) {
                  user.picture = "https://graph.facebook.com/" + userId + "/picture?type=large";
                  //now we have the users info, let's save it in the NativeStorage
                  alert(JSON.stringify(user));
              })
          }, function(error) {
              alert(JSON.stringify(error));
          });
      }
  }
  </code></pre>
  
  <p>contents of package.json</p>
  
  <pre><code>{
    "name": "Filanthro",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
      "clean": "ionic-app-scripts clean",
      "build": "ionic-app-scripts build",
      "ionic:build": "ionic-app-scripts build",
      "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
      "@angular/common": "4.0.0",
      "@angular/compiler": "4.0.0",
      "@angular/compiler-cli": "4.0.0",
      "@angular/core": "4.0.0",
      "@angular/forms": "4.0.0",
      "@angular/http": "4.0.0",
      "@angular/platform-browser": "4.0.0",
      "@angular/platform-browser-dynamic": "4.0.0",
      "@ionic-native/core": "3.4.2",
      "@ionic-native/facebook": "^3.5.0",
      "@ionic-native/in-app-browser": "^3.5.0",
      "@ionic-native/splash-screen": "3.4.2",
      "@ionic-native/status-bar": "3.4.2",
      "@ionic/storage": "2.0.1",
      "ionic-angular": "3.0.1",
      "ionicons": "3.0.0",
      "rxjs": "5.1.1",
      "sw-toolbox": "3.4.0",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "@ionic/app-scripts": "1.3.0",
      "typescript": "~2.2.1"
    },
    "cordovaPlugins": [
      "cordova-plugin-whitelist",
      "cordova-plugin-console",
      "cordova-plugin-device",
      "cordova-plugin-statusbar",
      "cordova-plugin-splashscreen",
      "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "FaB: An Ionic project"
  }
  </code></pre>
  
  <p>contents of app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { ErrorHandler, NgModule } from '@angular/core';
  import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
  import { SplashScreen } from '@ionic-native/splash-screen';
  import { StatusBar } from '@ionic-native/status-bar';
  import { Facebook }  from '@ionic-native/facebook';
  import { MyApp } from './app.component';
  import { HomePage } from '../pages/home/home';
  
  @NgModule({
    declarations: [
      MyApp,
      HomePage
    ],
    imports: [
      BrowserModule,
      IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
      MyApp,
      HomePage
    ],
    providers: [
      Facebook,
      StatusBar,
      SplashScreen,
      {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
  })
  export class AppModule {}
  </code></pre>