AngularFireMessaging - 错误 this._next 不是函数答案

【问题标题】：AngularFireMessaging - Error this._next is not a functionAngularFireMessaging - 错误 this._next 不是函数
【发布时间】：2020-08-04 13:45:30
【问题描述】：

在我的 Angular 应用程序中，我想用 firebase 添加一些 web-push-notifications。

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


  }
}

当我通过 Firebase 发送测试消息时，我可以获得令牌，并且在应用程序下的开发者控制台中是通知请求。

但在我的控制台中我收到此错误：

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

我正在使用 Angular 9 和 angular/fire 和 firebase。

【问题讨论】：

试试这个 FirebasePlugin.onMessageReceived((response)

标签： javascript angular firebase

【解决方案1】：

您的package.json 中的firebase 库版本必须大于7.16，并且它应该与firebase-messaging-sw.js 中的版本匹配

我发现解决方案很详细here。

【讨论】：

【解决方案2】：

似乎是库核心问题，有两个选项可以避免错误：

来自stackoverflow.com/a/60557818/7927724，我尝试使用这些版本并且效果很好。你可以先试一试，直到你发现实际版本有问题
您可以尝试以下解决方法：

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

【讨论】：