AngularFireMessaging - Error this._next is not a function

Question

In my angular Application i wanted to add some web-push-notifications with firebase.

import { Component } from "@angular/core";
import { AngularFireMessaging } from "@angular/fire/messaging";
import { mergeMapTo } from "rxjs/operators";


@Component({
  selector: "app-home",
  templateUrl: "home.page.html",
  styleUrls: ["home.page.scss"],
})
export class HomePage {
  constructor(private afMessaging: AngularFireMessaging) {}

  requestPermission() {
    this.afMessaging.requestPermission
      .pipe(mergeMapTo(this.afMessaging.tokenChanges))
      .subscribe(
        (token) => {
          console.log("Permission granted! Save to the server!", token);

          this.afMessaging.messages.subscribe(
            (message) => {
              console.log(message);
            },
            (error) => {
              console.log("error", error);
            }
          );
        },
        (error) => {
          console.error(error);
        }
      );


  }
}

I can get a Token and in the developer Console under Application are Notification Requests, when I send a test Message via Firebase.

But in my Console I get this error:

zone-evergreen.js:659 Unhandled Promise rejection: this._next is not a function ; Zone: <root> ; Task: ServiceWorkerContainer.addEventListener:message ; Value: TypeError: this._next is not a function
    at WindowController.next [as onMessageCallback] (Subscriber.js:49)
    at WindowController.<anonymous> (index.esm.js:1067)
    at step (tslib.es6.js:100)
    at Object.next (tslib.es6.js:81)
    at tslib.es6.js:74
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:70)
    at WindowController.push../node_modules/@firebase/messaging/dist/index.esm.js.WindowController.messageEventListener (index.esm.js:1056)
    at ServiceWorkerContainer.<anonymous> (index.esm.js:890)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399) TypeError: this._next is not a function

I am using Angular 9 and angular/fire and firebase.

try this FirebasePlugin.onMessageReceived((response) – Ghayyas Mubashir Apr 21 '20 at 17:55 — Ghayyas Mubashir, Apr 21 '20 at 17:55

score 1 · Answer 1 · answered Aug 10 '20 at 01:49

1

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

I found the solution is detailed here.

answered Aug 10 '20 at 01:49

Rami Alloush

2,308
2
27
33

score 0 · Answer 2 · answered Apr 30 '20 at 06:23

It seems like it is library core issues, and there is two options to avoid error:

From stackoverflow.com/a/60557818/7927724 i tried to go with these versions and it works fine. You can try it for now until you will find out problem with actual versions
You can try this workaround:

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

AngularFireMessaging - Error this._next is not a function

2 Answers2