AngularFireMessaging - 错误 this._next 不是函数

Question

在我的角度应用程序中，我想添加一些带有 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);

        }

      );

  }

}

当我通过 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。

Answer 1

您的库版本必须firebase大于7.16您的库版本package.json，并且它应该与中的版本匹配firebase-messaging-sw.js我发现这里有详细的解决方案。

Answer 2

似乎是库核心问题，有两个选项可以避免错误：从stackoverflow.com/a/60557818/7927724我尝试使用这些版本并且效果很好。你可以先试试看，直到你发现实际版本有问题您可以尝试以下解决方法：this.afMessaging.messaging.subscribe(&nbsp; &nbsp; (_messaging: any) => {&nbsp; &nbsp; &nbsp; &nbsp; messaging._next = (payload: any) = > {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(payload);&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; });