Ionic 4+Angular 6集成Facebook/Google登录报错：Object(...)不是函数

你遇到的TypeError: Object(...) is not a function报错，核心原因是**@ionic-native插件版本和你的Ionic 4环境不兼容**。你的项目用的是Ionic 4（@ionic/angular 4.0.0-alpha.7）+ Angular 6，而你安装的@ionic-native插件大概率是针对Ionic 3的4.x版本，这两个版本的插件在导入方式、依赖注入逻辑上有本质区别。

下面是一步步的解决方案：

1. 卸载旧版不兼容的插件 #

先把现有的@ionic-native Facebook和Google Plus包卸载掉：

npm uninstall @ionic-native/facebook @ionic-native/google-plus --save

2. 安装适配Ionic 4的5.x版本插件 #

Ionic 4+需要使用@ionic-native的5.x版本，而且要注意导入路径要加/ngx后缀（这是Angular 6+的新要求）：

npm install @ionic-native/facebook@5.x @ionic-native/google-plus@5.x --save

3. 安装底层Cordova插件 #

@ionic-native只是Cordova插件的Angular封装层，必须安装对应的原生Cordova插件才能正常工作：

• 安装Facebook插件（替换成你的应用ID和名称）：

  cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="你的Facebook应用ID" --variable APP_NAME="你的Facebook应用名称"
  

• 安装Google Plus插件（替换成你的反向客户端ID）：

  cordova plugin add cordova-plugin-googleplus --save --variable REVERSED_CLIENT_ID="你的Google反向客户端ID"
  

4. 修正Service中的导入和注入方式 #

在你的auth.service.ts里，要使用带/ngx的导入路径，并且确保注入方式符合Angular 6+的规范：

import { Injectable } from '@angular/core';
import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';
import { GooglePlus } from '@ionic-native/google-plus/ngx';

@Injectable({
  providedIn: 'root' // Angular 6+的providedIn方式，无需在app.module.ts中注册
})
export class AuthService {
  constructor(
    private fb: Facebook,
    private googlePlus: GooglePlus
  ) { }

  // Facebook登录示例
  async loginWithFacebook() {
    try {
      const loginRes: FacebookLoginResponse = await this.fb.login(['public_profile', 'email']);
      // 这里处理登录成功后的逻辑，比如获取用户信息、存入token等
      console.log('FB登录成功:', loginRes);
    } catch (err) {
      console.error('FB登录失败:', err);
    }
  }

  // Google登录示例
  async loginWithGoogle() {
    try {
      const userInfo = await this.googlePlus.login({
        scopes: 'email profile',
        offline: true // 允许获取离线token
      });
      console.log('Google登录成功:', userInfo);
    } catch (err) {
      console.error('Google登录失败:', err);
    }
  }
}

5. 额外注意事项 #

• 你当前的Cordova平台是空的（Cordova Platforms : none），必须添加对应的平台才能测试原生功能：

  cordova platform add android
  

• 你的Ionic版本是4.0.0-alpha.7，属于早期测试版，可能存在一些未知bug，如果条件允许，建议升级到稳定版的Ionic 4+，减少兼容性问题：

  npm install @ionic/angular@latest --save
  

这个错误的本质是旧版插件使用了Angular的旧版装饰器和导出方式，和Angular 6+的新注入系统不匹配，导致无法正确初始化插件实例，从而抛出Object(...) is not a function的错误。按照上面的步骤更新插件版本并修正导入方式后，问题应该就能解决了。

内容的提问来源于stack exchange，提问作者Kevin Summersill