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.
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.
2 Likes
Thanks u dear, saved my time
no problem 
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" />
After updating to cordova-plugin-firebasex I was not able to use ionic-native/firebase or ionic-native/firebasex in my ionic 3 project.
To fix this I now use
(<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}`); }
})
All details here
Since ionic-native/firebase doesn’t work anymore, I removed it from package.json
After doing this I was facing another problem, that notifications showed up only when the app was in background if I call the method onMessageReceived.
But if i do not call onMessageReceived() notifications showed up both when app was in foreground or in background.
I found the answer here
Notification message flow:
App is in foreground:
a. By default, when a notification message arrives the app receives the notification message payload in the onMessageReceived JavaScript callback without any system notification on the device itself.
b. If the data section contains the notification_foreground key, the plugin will display a system notification while in the foreground.App is in background:
a. User receives the notification message as a system notification in the device notification bar b. User taps the system notification which launches the app
b. User receives the notification message payload in the onMessageReceived JavaScript callback
So to show notification in foreground as well simply send
{ data :
{ notification_foreground: true
.
.
.
}
}