在离子2中的本地facebook登录

Question

我试图使用本机FB登录在离子2项目中使用cordova-4。我在一个没有安装Facebook应用程序的模拟器上测试我的应用程序。我还在应用程序中安装了cordova浏览器plugin.But，当我运行该应用程序时，会发现一个错误。

TypeError:不能读取未定义的属性“应用”：不能读取callCordovaPlugin上未定义的属性。

我的实现是受https://ionicthemes.com/tutorials/about/ionic2-facebook-login的启发，我添加了declare : any;‘到我的declarations.d.ts文件中，它仍然不能工作？帮帮我。

这是我的home.ts的代码片段。

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));
        });
    }
}

package.json含量

{
  "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"
}

app.module.ts含量

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 {}

Answer 1

这是仿真器.It在实际设备上运行良好的结果。