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

Question

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

  this.angularFireMessaging.         


        

Answer 1

The problem is indeed related to the version of Firebase! Finally, I found the solution is detailed here.

You must have firebase library version greater than 7.16 inside your package.json and it should match the version in firebase-messaging-sw.js

Answer 2

The solution is detailed here.

In short, you must have firebase library version greater than 7.16 inside your package.json and it should match the version in firebase-messaging-sw.js

Answer 3

Yes What I have realized that i had using the wrong version of "@angular/fire": "^5.3.0" which is not compatible with "firebase": "^7.6.2", in my package.json.

So, What i have did-

In firebase-messaging-sw.js or the service worker file?

importScripts('https://www.gstatic.com/firebasejs/5.0.0/firebase-app.js'); importScripts('https://www.gstatic.com/firebasejs/5.0.0/firebase-messaging.js');

should have the same version with your firebase on package.json

"dependencies": { ... "firebase": "^5.0.0", "@angular/fire": "^5.0.0", ... }

And it is working like a charm.

Answer 4

Try with this versions:

"dependencies": {
...
"firebase": "^7.6.0",
"@angular/fire": "^5.2.3",
...
}

it works perfectly...

Check this repo: Angular Push Notification

Answer 5

There is workaround for it.

You need to modify your custom messaging service little bit.

Inside constructor you need to replace following code

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

with that

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

Then you will get push notification even you are in fore-ground.