CODEWITHSUNDEEP
angularionic-frameworkionic2ionic3angularfire2
Testing Anurag
Testing Anurag

Reputation: 643

Facing problem in integrating gmail with ionic 3 , getting run time error >>Object(...) is not a function

I am working with ionic 3 where I am trying to integrate google plus login into my Application through firebase . But I am getting error ,

error is >> 

 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 file 

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 code 

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

For more Information I have followed the youtube tutorial 1. Google Authentication ionic 2 & 3 with Firebase -Most Easiest way for Google auth https://www.youtube.com/watch?v=g_UGNO3IfN8

  1. http://edupala.com/ionic-3-gmail-login-with-firebase/

But I am getting same error each time error >> ERROR TypeError: Object(...) is not a function

Upvotes: 3

Views: 1239

Answers (3)

Shashwat Gupta
Shashwat Gupta

Reputation: 5272

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)

enter image description here

Solution :

npm install --save @ionic-native/[email protected]

Upvotes: 0

paras shah
paras shah

Reputation: 889

As You mention you are working on ionic version 3 project and you are using ngx which clearly shows that dependencies of latest version ionic V4.

First remove the existing plugin ionic cordova plugin remove cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid

Re add it with

$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid

$ npm install --save @ionic-native/google-plus@4

Remember to follow doc v3 for further implementation

https://ionicframework.com/docs/v3/native/google-plus/

Do not forget to enable Google sign in method from firebase console

https://console.firebase.google.com/project/nakelasi/authentication/providers

Upvotes: 5

Rathnakara S
Rathnakara S

Reputation: 1466

The error comes if you installed the wrong native plugin version for your project type.

Check the project type in ionic.config.json

If the type is "ionic-angular" (generally Ionic 3), then install 4.x.x version.

example

npm i -s @ionic-native/[email protected]

If the type is "angular" (generally Ionic 4), then install 5.x.x-beta version

npm i -s @ionic-native/[email protected]

Note:

Add ngx at the end of import only if you are using Angular 6 (Ionic 4)

import { GooglePlus } from '@ionic-native/google-plus/ngx';

if not remove ngx from the import both in app.module.ts and app.component.ts,(Ionic 3)

import { GooglePlus } from '@ionic-native/google-plus';

Refencence:https://github.com/ionic-team/ionic/issues/15225#issuecomment-414074074

Upvotes: 3

Related Questions