将 gmail 与 ionic 3 集成时遇到问题，出现 运行 时间错误 >>Object(...) is not a function
Facing problem in integrating gmail with ionic 3 , getting run time error >>Object(...) is not a function
我正在使用 ionic 3
我试图通过 google plus login 将 firebase 集成到我的应用程序中。
但是我收到错误，
错误是>>
ERROR TypeError: Object(...) is not a function
at GooglePlus.login (index.js:27)
at HomePage.webpackJsonp.186.HomePage.login (home.ts:28)
at Object.eval [as handleEvent] (HomePage.html:3)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at core.js:10629
at HTMLButtonElement.<anonymous> (platform-browser.js:2628)
at t.invokeTask (polyfills.js:3)
I am putting code below which I have used for integrationg google plus Integration
.ts 文件
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import firebase from 'firebase';
/**
* Generated class for the HomePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public navParams: NavParams ,private googleplus: GooglePlus ) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
}
login(){
this.googleplus.login({
'webClientId':"556482052199-f7848gi58u5h89lf2fvs99h5prk2vlbe.apps.googleusercontent.com",
'offline':true
}).then(res =>{
firebase.auth().signInWithCredential(firebase.auth.GoogleAuthProvider.credential(res.idToken)).then(suc=>{
alert('login successful');
}).catch(ns=> {
alert('not successful');
})
})
}
}
.html代码
<button style=' margin: 30px;
padding: 19px;
background: tomato;' ion-buttons icon-left (click)='login()' block outline><ion-icon name="logo-googleplus"> Login with google </ion-icon></button>
****Package.json****
{
"name": "login",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/fire": "^5.1.1",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "^3.6.1",
"@ionic-native/google-plus": "^5.0.0",
"@ionic-native/splash-screen": "~4.18.0",
"@ionic-native/status-bar": "~4.18.0",
"@ionic/storage": "2.2.0",
"angularfire2": "^5.1.1",
"cordova-android": "7.1.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-googleplus": "7.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^5.8.2",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.1",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": ".com.googleusercontent.apps.556482052199-f7848gi58u5h89lf2fvs99h5prk2vlbe"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
有关更多信息，我已遵循 youtube 教程
1. Google 使用 Firebase 的身份验证 ionic 2 & 3 - Google auth 最简单的方法
https://www.youtube.com/watch?v=g_UGNO3IfN8
但我每次都遇到同样的错误
错误 >> 错误类型错误：对象 (...) 不是函数
正如您提到的，您正在处理 ionic 版本 3 项目并且您正在使用 ngx，这清楚地表明最新版本 ionic V4.
的依赖性
首先移除已有的插件
ionic cordova 插件删除 cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
重新添加
$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
$ npm install --save @ionic-native/google-plus@4
记得按照 doc v3 进一步实施
https://ionicframework.com/docs/v3/native/google-plus/
不要忘记从 firebase 控制台启用 Google 登录方法
https://console.firebase.google.com/project/nakelasi/authentication/providers
如果您为您的项目类型安装了错误的本机插件版本，则会出现此错误。
检查ionic.config.json中的项目类型
如果类型是"ionic-angular"（一般是Ionic 3），那么安装4.x.x版本。
例子
npm i -s @ionic-native/google-plus@4.20.0
如果类型是"angular"（一般是Ionic 4），那么安装5.x.x-beta版
npm i -s @ionic-native/google-plus@5.0.0-beta.24
注：
仅当您使用 Angular 6 (Ionic 4)
时才在导入末尾添加 ngx
import { GooglePlus } from '@ionic-native/google-plus/ngx';
如果不从 app.module.ts 和 app.component.ts 的导入中删除 ngx，(Ionic 3)
import { GooglePlus } from '@ionic-native/google-plus';
引用：https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074
Problem in Ionic 4 or 5
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught TypeError: Object(...) is not a function
at vendor.js:112711
at Module../node_modules/@ionic-native/google-plus/index.js (vendor.js:112772)
at __webpack_require__ (runtime.js:85)
at Module../src/app/app.module.ts (main.js:1017)
at __webpack_require__ (runtime.js:85)
at Module../src/main.ts (main.js:2350)
at __webpack_require__ (runtime.js:85)
at Object.0 (main.js:2375)
at __webpack_require__ (runtime.js:85)
at checkDeferredModules (runtime.js:46)
Solution :
npm install --save @ionic-native/google-plus@5.0.0-beta.14
我正在使用 ionic 3 我试图通过 google plus login 将 firebase 集成到我的应用程序中。 但是我收到错误，
错误是>>
ERROR TypeError: Object(...) is not a function
at GooglePlus.login (index.js:27)
at HomePage.webpackJsonp.186.HomePage.login (home.ts:28)
at Object.eval [as handleEvent] (HomePage.html:3)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at core.js:10629
at HTMLButtonElement.<anonymous> (platform-browser.js:2628)
at t.invokeTask (polyfills.js:3)
I am putting code below which I have used for integrationg google plus Integration
.ts 文件
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { GooglePlus } from '@ionic-native/google-plus/ngx';
import firebase from 'firebase';
/**
* Generated class for the HomePage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-home',
templateUrl: 'home.html',
})
export class HomePage {
constructor(public navCtrl: NavController, public navParams: NavParams ,private googleplus: GooglePlus ) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad HomePage');
}
login(){
this.googleplus.login({
'webClientId':"556482052199-f7848gi58u5h89lf2fvs99h5prk2vlbe.apps.googleusercontent.com",
'offline':true
}).then(res =>{
firebase.auth().signInWithCredential(firebase.auth.GoogleAuthProvider.credential(res.idToken)).then(suc=>{
alert('login successful');
}).catch(ns=> {
alert('not successful');
})
})
}
}
.html代码
<button style=' margin: 30px;
padding: 19px;
background: tomato;' ion-buttons icon-left (click)='login()' block outline><ion-icon name="logo-googleplus"> Login with google </ion-icon></button>
****Package.json****
{
"name": "login",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"start": "ionic-app-scripts serve",
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint"
},
"dependencies": {
"@angular/animations": "5.2.11",
"@angular/common": "5.2.11",
"@angular/compiler": "5.2.11",
"@angular/compiler-cli": "5.2.11",
"@angular/core": "5.2.11",
"@angular/fire": "^5.1.1",
"@angular/forms": "5.2.11",
"@angular/http": "5.2.11",
"@angular/platform-browser": "5.2.11",
"@angular/platform-browser-dynamic": "5.2.11",
"@ionic-native/core": "^3.6.1",
"@ionic-native/google-plus": "^5.0.0",
"@ionic-native/splash-screen": "~4.18.0",
"@ionic-native/status-bar": "~4.18.0",
"@ionic/storage": "2.2.0",
"angularfire2": "^5.1.1",
"cordova-android": "7.1.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-googleplus": "7.0.0",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^3.1.1",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"firebase": "^5.8.2",
"ionic-angular": "3.9.2",
"ionicons": "3.0.0",
"rxjs": "5.5.11",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.29"
},
"devDependencies": {
"@ionic/app-scripts": "3.2.1",
"typescript": "~2.6.2"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": ".com.googleusercontent.apps.556482052199-f7848gi58u5h89lf2fvs99h5prk2vlbe"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"android"
]
}
}
有关更多信息，我已遵循 youtube 教程 1. Google 使用 Firebase 的身份验证 ionic 2 & 3 - Google auth 最简单的方法 https://www.youtube.com/watch?v=g_UGNO3IfN8
但我每次都遇到同样的错误 错误 >> 错误类型错误：对象 (...) 不是函数
正如您提到的，您正在处理 ionic 版本 3 项目并且您正在使用 ngx，这清楚地表明最新版本 ionic V4.
首先移除已有的插件 ionic cordova 插件删除 cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
重新添加
$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
$ npm install --save @ionic-native/google-plus@4
记得按照 doc v3 进一步实施
https://ionicframework.com/docs/v3/native/google-plus/
不要忘记从 firebase 控制台启用 Google 登录方法
https://console.firebase.google.com/project/nakelasi/authentication/providers
如果您为您的项目类型安装了错误的本机插件版本，则会出现此错误。
检查ionic.config.json中的项目类型
如果类型是"ionic-angular"（一般是Ionic 3），那么安装4.x.x版本。
例子
npm i -s @ionic-native/google-plus@4.20.0
如果类型是"angular"（一般是Ionic 4），那么安装5.x.x-beta版
npm i -s @ionic-native/google-plus@5.0.0-beta.24
注：
仅当您使用 Angular 6 (Ionic 4)
时才在导入末尾添加 ngximport { GooglePlus } from '@ionic-native/google-plus/ngx';
如果不从 app.module.ts 和 app.component.ts 的导入中删除 ngx，(Ionic 3)
import { GooglePlus } from '@ionic-native/google-plus';
引用：https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074
Problem in Ionic 4 or 5
Failed to load resource: the server responded with a status of 404 (Not Found)
Uncaught TypeError: Object(...) is not a function
at vendor.js:112711
at Module../node_modules/@ionic-native/google-plus/index.js (vendor.js:112772)
at __webpack_require__ (runtime.js:85)
at Module../src/app/app.module.ts (main.js:1017)
at __webpack_require__ (runtime.js:85)
at Module../src/main.ts (main.js:2350)
at __webpack_require__ (runtime.js:85)
at Object.0 (main.js:2375)
at __webpack_require__ (runtime.js:85)
at checkDeferredModules (runtime.js:46)
Solution :
npm install --save @ionic-native/google-plus@5.0.0-beta.14