ionic3 cordova-plugin-facebook4 facebook 安装问题错误答案

【问题标题】：ionic3 cordova-plugin-facebook4 facebook install issues errorsionic3 cordova-plugin-facebook4 facebook 安装问题错误
【发布时间】：2017-07-17 03:38:25
【问题描述】：

我似乎遇到了原生插件的问题。

日志路径：/Users/philipwilson/workspace/ionic/test2/platforms/ios/cordova/console.log

        [21:12:05]  console.log: Angular is running in the development mode. Call enableProdMode() to enable the production 
                    mode. 
        [21:12:05]  console.log: Ionic Native: deviceready event fired after 542 ms 
        [21:12:05]  console.warn: Native: tried calling Facebook.browserInit, but the Facebook plugin is not installed. 
        [21:12:05]  console.warn: Install the Facebook plugin: 'ionic plugin add cordova-plugin-facebook4'

我尝试了很多东西。

 518  ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="99999999999" --variable APP_NAME="test2.com"
 565  ionic cordova build ios
 578  npm install --save @ionic-native/facebook
 593  ionic plugin add cordova-plugin-facebook4
 594  ionic cordova emulate ios -lc

我遵循了一些示例，但仍然看到 ionic 3 和 angular4 存在问题

这是我的信息： ~/workspace/ionic/test2$ 离子信息

全局包：

@ionic/cli-utils : 1.5.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.5.0

本地包：

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.1
@ionic/cli-plugin-ionic-angular : 1.3.2
Cordova Platforms               : ios 4.4.0
Ionic Framework                 : ionic-angular 3.4.2

系统：

Node       : v8.0.0
OS         : OS X El Capitan
Xcode      : Xcode 8.2.1 Build version 8C1002 
ios-deploy : 1.8.3 
ios-sim    : 3.1.1 
npm        : 5.0.0

我也看过这些例子： https://ionicframework.com/docs/native/facebook/ https://ionicthemes.com/tutorials/about/ionic2-facebook-login

有人帮忙吗？

谢谢菲尔

【问题讨论】：

我遇到了一些问题，我必须删除然后重新添加目标平台才能正确安装插件。
谢谢.. 我会试试的
不走运.. 我试过cordova plugin rm cordova-plugin-facebook4 - 然后用cordova plugin add cordova-plugin-facebook4@1.7.4 --save --variable APP_ID=" 重新安装" --variable APP_NAME=""

标签： facebook angular ionic-framework ionic3

【解决方案1】：

这就是我所做的，确保您在 app.module.ts 文件中公开 Facebook 模块。

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

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

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

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Facebook,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

在你的home.ts:

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

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

  constructor(public navCtrl: NavController, private fb: Facebook) {
    this.fb = fb

    console.log(fb)

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


    this.fb.logEvent(this.fb.EVENTS.EVENT_NAME_ADDED_TO_CART);
  }

}

如果您忘记在 app.module.ts 文件中包含 Facebook 提供程序，您将收到错误："No provider for Facebook!"

附带说明，请确保您使用模拟器或设备来测试登录操作，否则将无法正常工作。

资源： - https://javebratt.com/ionic-2-facebook-login/ - https://ionicframework.com/docs/native/facebook/

【讨论】：

嗨，非常感谢。在过去的 3 天里，我一直在研究这个问题。我是 Typescript 的新手，犯了一些错误。再次感谢！！菲尔
很高兴知道这项工作。然而，这似乎是一件非常不正常的事情。由于@ionic-native/facebook 是第三方 Angular 包，考虑到一个人不也不应该提供服务，例如FormBuilder 或Http，除非需要替换他们。我想这只是由于 Angular 2 引入了与语言本身的常见习语重叠的不必要的专有模式而造成的更多混乱。

【解决方案2】：

我遇到了同样的问题。但我正在 Ionic 的 DevApp 应用程序上测试我的移动应用程序。后来我发现，并不是所有的原生组件都被 Ionic 的 DevApp 支持。

以下显示了 Ionic 的 DevApp 支持的插件列表： List of supported plugins

毕竟，我直接在 ios 设备上测试了我的 facebook 插件，它可以工作。即使在 xcode 模拟器上。

问候，奥利弗

【讨论】：