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

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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 7
Comments: 20 (2 by maintainers)

Most upvoted comments

this worked for me:

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

+16

plknkl on May 1, 2020

this worked for me:

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

bvanbleyenbergh on Apr 1, 2020

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.

lherman-cs on Feb 3, 2020

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:

hiepxanh on Jul 22, 2020

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

dibyendusaha on Jun 20, 2020

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

jscoder1009 on Mar 12, 2020

I’m problem too

piseysen on Feb 3, 2020

Found this workaround for now:

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

andryichenko on Mar 23, 2020

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.

isaax2 on Mar 5, 2020

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)

piseysen on Feb 3, 2020

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.

vincepunkrock on Feb 3, 2020