Angularfire: Unhandled Promise rejection: this._next is not a function : Zone in @angular/fire/messaging

[kanishk-dev]

When I am receiving firebase push notifications in the foreground, by using @angular/fire/messaging. The method is:

  this.angularFireMessaging.messages.subscribe(
      (payload) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      })

Let me share my complete code: PushNotificationsService Code I have written.

My Angular-cli versions:

Angular CLI: 8.1.3
Node: 12.4.0
OS: linux x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@angular/fire                     5.3.0
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

Let me share my package.json files: package.json

I am getting the below error when I receive message in the foreground:

Unhandled Promise rejection: this._next is not a function ; Zone: <root> ; Task: ServiceWorkerContainer.addEventListener:message ; Value: TypeError: "this._next is not a function"
    next RxJS
    messageEventListener index.esm.js:1046
    step tslib.es6.js:99
    verb tslib.es6.js:80
    __awaiter tslib.es6.js:73
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:69
    messageEventListener index.esm.js:1035
    WindowController index.esm.js:876
    Angular 5
 next@http://localhost:4200/vendor.js:111323:18
./node_modules/@firebase/messaging/dist/index.esm.js/WindowController.prototype.messageEventListener/</<@http://localhost:4200/firebase-messaging.js:2418:34
step@http://localhost:4200/vendor.js:127272:23
verb/<@http://localhost:4200/vendor.js:127253:53
__awaiter/<@http://localhost:4200/vendor.js:127246:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:3882:29
__awaiter@http://localhost:4200/vendor.js:127242:12
./node_modules/@firebase/messaging/dist/index.esm.js/WindowController.prototype.messageEventListener@http://localhost:4200/firebase-messaging.js:2407:71
WindowController/<@http://localhost:4200/firebase-messaging.js:2248:26
invokeTask@http://localhost:4200/polyfills.js:3397:31
runTask@http://localhost:4200/polyfills.js:3174:47
invokeTask@http://localhost:4200/polyfills.js:3471:34
invokeTask@http://localhost:4200/polyfills.js:4609:14
globalZoneAwareCallback@http://localhost:4200/polyfills.js:4635:27

Any help is highly appreciable! CODE: GITHUB REPO LINK

I have update my secret key from firebase in the GitHub code

[dineshrawat11]

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",

[vincepunkrock]

I have the same problem

[lherman-cs]

I have the same problem too. @dineshrawat11 it doesn't look the PR would fix it. I'm using [email protected] at this moment. Is there anybody working on this? If not, I can take a look at this.

[piseysen]

I'm problem too

[vincepunkrock]

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.

[piseysen]

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)

[isaax2]

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.

[jscoder1009]

I am facing the same issue.. is there a fix for this issue?

[andryichenko]

Found this workaround for now:

this.angularFireMessaging.messaging.subscribe(
    (_messaging: any) = > {
        messaging._next = (payload: any) = > {
            console.log(payload);
        };
    }
);

[bvanbleyenbergh]

this worked for me:

this.angularFireMessaging.messaging.subscribe(
  (messaging: any) => {
    messaging.onMessageCallback = (payload: any) => {
      console.log(payload);
    };
  }
);

[anuraj]

None of the above solutions working for me 😢 If I downgrade the event is firing.

[aloisgh]

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.

[plknkl]

this worked for me:

constructor( private afMessaging: AngularFireMessaging ) {
    afMessaging.onMessage((payload) => {
      console.log(payload)
    })
}

[JeongJun-Lee]

AngularFire public 6 doesn't have the angularFireMessaging.messaging Observable.

[mikeandtherest]

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');

[pepegmz]

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",

[zwu52]

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.

[hiepxanh]

PR here https://github.com/angular/angularfire/pull/2497, I'm little busy, so hope someone can test

[dibyendusaha]

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

[hiepxanh]

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: