Firebase Plugin issue with ionic 3

Dear Community,
I am struggling with firebase plugin in ionic 3. I’ve tried plugin fcm,firebasex etc. but no one is working, because of some plugin build failed or m not getting token.
I am using ionic 3 with angular 5, I just want push notification using firebase
Please help and guide me. Thanks a lot in advance

Hey @hg8200,

Use cordova-plugin-firebasex instead of firebase/fcm plugin.
As well use “@ionic-native/firebase”: “^4.0.0” this for firebase reference.

cordova-plugin-firebasex

Hope this will help you.

When i use firebase-x when i am getting the error in device log

“Uncaught Error: Unexpected value ‘Firebase’ imported by the module ‘AppModule’. Please add a @NgModule annotation.”, source: http://localhost/build/vendor.js (94449)

i used the following commands–
ionic cordova plugin add cordova-plugin-firebasex
npm i -s @ionic-native/firebase@4

And i import this

import { Firebase } from ‘@ionic-native/firebase’

My package.json is


> 
> {
>   "name": "test2",
>   "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/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": "~4.20.0",
>     "@ionic-native/firebase": "^4.20.0",
>     "@ionic-native/splash-screen": "~4.20.0",
>     "@ionic-native/status-bar": "~4.20.0",
>     "@ionic/storage": "2.2.0",
>     "cordova-android": "7.1.4",
>     "cordova-plugin-device": "^2.0.2",
>     "cordova-plugin-firebasex": "7.0.1",
>     "cordova-plugin-ionic-keyboard": "^2.2.0",
>     "cordova-plugin-ionic-webview": "^4.1.3",
>     "cordova-plugin-splashscreen": "^5.0.2",
>     "cordova-plugin-statusbar": "^2.4.2",
>     "cordova-plugin-whitelist": "^1.3.3",
>     "ionic-angular": "3.9.5",
>     "ionicons": "3.0.0",
>     "rxjs": "5.5.11",
>     "sw-toolbox": "3.6.0",
>     "zone.js": "0.8.29"
>   },
>   "devDependencies": {
>     "@ionic/app-scripts": "3.2.2",
>     "typescript": "~2.6.2"
>   },
>   "description": "An Ionic project",
>   "cordova": {
>     "plugins": {
>       "cordova-plugin-firebasex": {},
>       "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"
>     ]
>   }
> }

you need to include firebase in ur app.module.ts under providers.

My 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 { MyApp } from ‘./app.component’;
import { HomePage } from ‘…/pages/home/home’;
import { Firebase } from ‘@ionic-native/firebase’

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

Uncaught Error: Unexpected value ‘Firebase’ imported by the module ‘AppModule’. Please add a @NgModule annotation.", source: http://localhost/build/vendor.js

follow this as u cant use ionic native wrapper for ionic 3 :-

The above PR does not work for Ionic 3 so you (currently) can’t use the Ionic Native Firebase Typescript wrapper with Ionic 3. (i.e. import { Firebase } from "@ionic-native/firebase" will not work).

To use cordova-plugin-firebasex with Ionic 3, you’ll need to call its Javascript API directly from your Typescript app code, for example:

(<any>window).FirebasePlugin.getToken(token => console.log(`token: ${token}`))

(<any>window).FirebasePlugin.onMessageReceived((message) => {
    if (message.tap) { console.log(`Notification was tapped in the ${message.tap}`); }
})

If you want to make the onMessageReceived() JS API behave like the Ionic Native wrapper:

onNotificationOpen() {
      return new Observable(observer => {
            (window as any).FirebasePlugin.onMessageReceived((response) => {
                observer.next(response);
            });
       });
}
...
this.onNotificationOpen().subscribe(data => console.log(`FCM message: ${data}`));

See the cordova-plugin-firebasex-ionic3-test example project for a demonstration of how to use the plugin with Ionic 3.

source :- cordova-plugin-firebasex#ionic-3

1 Like

I think you have to use firebase npm version “^4.0.0”.
take a look at my package.json file.

{
  "name": "demo",
  "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/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/call-number": "^4.0.0",
    "@ionic-native/camera": "^4.0.0",
    "@ionic-native/core": "~4.20.0",
    "@ionic-native/date-picker": "^4.0.0",
    "@ionic-native/diagnostic": "^4.0.0",
    "@ionic-native/dialogs": "^4.0.0",
    "@ionic-native/fcm": "^4.0.0",
    "@ionic-native/file": "^4.0.0",
    "@ionic-native/file-path": "^4.0.0",
    "@ionic-native/file-transfer": "^4.0.0",
    "@ionic-native/firebase": "^4.0.0",
    "@ionic-native/firebase-x": "^5.12.0",
    "@ionic-native/geolocation": "^4.0.0",
    "@ionic-native/google-plus": "^4.0.0",
    "@ionic-native/keyboard": "^4.12.0",
    "@ionic-native/local-notifications": "^4.0.0",
    "@ionic-native/splash-screen": "~4.20.0",
    "@ionic-native/sqlite": "^4.0.0",
    "@ionic-native/status-bar": "~4.20.0",
    "@ionic-native/transfer": "^3.10.0",
    "@ionic-native/wheel-selector": "^4.0.0",
    "@ionic/storage": "2.2.0",
    "angular-star-rating": "^4.0.0-beta.3",
    "angular2-text-mask": "^4.1.0",
    "call-number": "1.0.1",
    "cordova-android": "^8.0.0",
    "cordova-plugin-androidx": "^1.0.2",
    "cordova-plugin-androidx-adapter": "^1.1.0",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-camera": "^4.0.3",
    "cordova-plugin-cocoapod-supportx": "^1.7.3",
    "cordova-plugin-datepicker": "^0.9.3",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-dialogs": "^2.0.1",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-file-transfer": "^1.7.1",
    "cordova-plugin-filepath": "^1.5.1",
    "cordova-plugin-firebasex": "^3.0.8",
    "cordova-plugin-geolocation": "^4.0.1",
    "cordova-plugin-googleplus": "^8.1.2",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "cordova-sqlite-storage": "^3.2.0",
    "cordova-wheel-selector-plugin": "^1.1.2",
    "cordova.plugins.diagnostic": "^4.0.12",
    "ion2-calendar": "^2.0.10",
    "ionic-angular": "3.9.5",
    "ionic-calendar-date-picker": "^0.1.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionic3-star-rating": "^1.1.5",
    "ionicons": "3.0.0",
    "jquery": "^3.2.0",
    "moment": "^2.24.0",
    "mx.ferreyra.callnumber": "0.0.2",
    "ng-socket-io": "^0.2.4",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.29"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.2",
    "@ionic/lab": "1.0.24",
    "css-star-rating": "^1.2.4",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-datepicker": {},
      "cordova-plugin-dialogs": {},
      "cordova-plugin-file": {},
      "cordova-plugin-filepath": {},
      "cordova-plugin-file-transfer": {},
      "cordova-plugin-geolocation": {},
      "cordova-sqlite-storage": {},
      "cordova-wheel-selector-plugin": {},
      "cordova-plugin-camera": {},
      "ionic-plugin-keyboard": {},
      "mx.ferreyra.callnumber": {},
      "cordova.plugins.diagnostic": {
        "ANDROID_SUPPORT_VERSION": "28.+"
      },
      "cordova-plugin-firebasex": {
        "ANDROID_PLAY_SERVICES_TAGMANAGER_VERSION": "17.0.0",
        "ANDROID_FIREBASE_CORE_VERSION": "17.0.0",
        "ANDROID_FIREBASE_MESSAGING_VERSION": "19.0.0",
        "ANDROID_FIREBASE_CONFIG_VERSION": "18.0.0",
        "ANDROID_FIREBASE_PERF_VERSION": "18.0.0",
        "ANDROID_FIREBASE_AUTH_VERSION": "18.0.0",
        "ANDROID_CRASHLYTICS_VERSION": "2.10.1",
        "ANDROID_CRASHLYTICS_NDK_VERSION": "2.1.0",
        "ANDROID_SHORTCUTBADGER_VERSION": "1.1.22"
      },
      "cordova-plugin-androidx": {},
      "cordova-plugin-androidx-adapter": {},
      "call-number": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-googleplus": {
        "REVERSED_CLIENT_ID": "",
        "PLAY_SERVICES_VERSION": "15.0.1"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

I was getting the same issue than later i decided to switch to onesignal have not faced any single issue uptil now

when adding firebasex plugin it gives a warning

[himanshu@analytics test3]$ cordova plugin add cordova-plugin-firebasex
Installing "cordova-plugin-firebasex" for android
Plugin doesn't support this project's cordova version. cordova: 8.1.1, failed version requirement: >=9
Skipping 'cordova-plugin-firebasex' for android
Adding cordova-plugin-firebasex to package.json
Saved plugin info for "cordova-plugin-firebasex" to config.xml
Android Studio project detected

How i can do it, Please guide and help.

update your cordova version to 9 as plugin dosent support 8.1.1. and also refer to my above post

for ionic 3 u need to call `cordova-plugin-firebasex java script api directly in ur code to use it.

1 Like

Thanks u dear, saved my time

no problem :slight_smile: happy to help

1 Like

Can u hello me on this - on Notification tap after some time it redirect to main page?

Hi, I’m using cordova-plugin-firebasex for Ionic3, calling directly the api as in the example, something like

(<any>window).FirebasePlugin.logEvent('view_item', {some: "property"});

But no FirebasePlugin appear in windows, no problem with other plugin, any idea?
These are significant dependencies in my config.xml

    <plugin name="cordova-plugin-androidx" spec="^1.0.2" />
    <plugin name="cordova-plugin-androidx-adapter" spec="^1.1.0" />
    <plugin name="cordova-plugin-firebasex" spec="6.1.0" />
    <engine name="ios" spec="5.1.1" />
    <engine name="android" spec="8.1.0" />