Closed kanishk-dev closed 3 years ago
https://github.com/firebase/angularfire/pull/943 Its an open PR to angularfire
Solution could be:
"@angular/fire": "5.x.x",
"firebase": "5.x.x",
I have the same problem
I have the same problem too. @dineshrawat11 it doesn't look the PR would fix it. I'm using firebase@7.x.x at this moment. Is there anybody working on this? If not, I can take a look at this.
I'm problem too
I had this problem and solved it after reading the comments on this issue: https://github.com/angular/angularfire/issues/1904
I indeed fixed it temporarily by using firebase 7.6.0 with angular/fire 5.4.0. 7.8.0 wouldn't work.
I had this problem and solved it after reading the comments on this issue: #1904
I indeed fixed it temporarily by using firebase 7.6.0 with angular/fire 5.4.0. 7.8.0 wouldn't work.
Thanks, it works now( I used 7.6.0)
I Fix it with this easy solution.
You can import directly firebase inside an Angular Typescript component, and then set directly onMessage Method like Plain Javascript.
import * as firebase from 'firebase/app';
import 'firebase/messaging';
....
subscribe() {
const messaging = firebase.messaging();
messaging.usePublicVapidKey(environment.firebase.vapidKey);
messaging.onMessage((payload) => {
console.log('onMessage:', payload);
});
}
Note: None of Angular Observable solutions worked for me on the foreground messages.
I am facing the same issue.. is there a fix for this issue?
Found this workaround for now:
this.angularFireMessaging.messaging.subscribe(
(_messaging: any) = > {
messaging._next = (payload: any) = > {
console.log(payload);
};
}
);
this worked for me:
this.angularFireMessaging.messaging.subscribe(
(messaging: any) => {
messaging.onMessageCallback = (payload: any) => {
console.log(payload);
};
}
);
None of the above solutions working for me 😢 If I downgrade the event is firing.
I also encountered this issue, in the end it turned out the reason for it was that I was using the legacy API for sending the messages (or I was using it wrong). When sending a test message via the FB console, it worked in the background and foreground. While with the legacy API I could receive messages in the background but had this error when the application was in the foreground.
this worked for me:
constructor( private afMessaging: AngularFireMessaging ) {
afMessaging.onMessage((payload) => {
console.log(payload)
})
}
AngularFire public 6 doesn't have the angularFireMessaging.messaging Observable.
FYI, the only solution working for me on Angular 9.1.4 (both with promises and Observables) is the one suggested by @vincepunkrock above (i.e firebase 7.6.0 and @angular/fire 5.4.0)
Btw! Make sure that you also use the right firebase version inside firebase-messaging-sw.js
file, like this:
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');
I had this problem and I solved to do this:
in your firebase-messaging-sw.js add these lines:
` importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');
... //firebase config
const messaging = firebase.messaging();
messaging.onTokenRefresh = messaging.onTokenRefresh.bind(messaging); //<--this messaging.onMessage = messaging.onMessage.bind(messaging); //<-- and this `
and your subscribe:
`import { AngularFireMessaging } from '@angular/fire/messaging'
constructor( ... public aFireMessaging: AngularFireMessaging) { }
showBrowserMessages() { this.aFireMessaging.messages.pipe( tap(async msg => { console.log('showBrowserMessages', msg); const body: any = (msg as any).notification.body; const toast: any = await this.utilsService.createToast(body, true, 'bottom'); await toast.present(); }) ).subscribe((value) => console.log('value', value)); } `
I am using these versions:
"@angular/fire": "5.2.3", "firebase": "7.6.0",
Seems like an FCM issue for v > 7.6.0. Supposedly, FCM offer rxjs compatibility out of box. Specifically, you could do
let foregroundMessages$ = rxjs.Observable.create(function subscribe(observer) {
messaging.onMessage(observer);
});
foregroundMessages$.subscribe({
next: (msg) => handleForegroundMessage(msg),
error: (err) => console.log("err: " + err),
});
However it seem to be not working as intended as I get the same error in my test app.
PR here https://github.com/angular/angularfire/pull/2497, I'm little busy, so hope someone can test
Using "firebase": "^7.15.3", "@angular/fire": "^6.0.0", "@angular/common": "^9.1.11"
and @plknkl solution working fine and like fire. 3 cheers @plknkl , you saved my day. ❤️ +1
version 7.16 of firebase was fix this bug. Please update to the newest version and try this:
Remember to update your firebase
in package.json
. and the version must me matching with the firebase-messaging-sw.js
or the notification will not fire in foreground
for who was confuse with firebase-messaging-sw.js
you need to create a file and update the angular.json
follow the instruction:
When I am receiving firebase push notifications in the foreground, by using
@angular/fire/messaging
. The method is:Let me share my complete code: PushNotificationsService Code I have written.
My Angular-cli versions:
Let me share my package.json files: package.json
I am getting the below error when I receive message in the foreground:
Any help is highly appreciable! CODE: GITHUB REPO LINK
I have update my secret key from firebase in the GitHub code