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]

FirebaseExtended/angularfire#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 firebase@7.x.x 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: #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.