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

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

1. 从stackoverflow.com/a/60557818/7927724我尝试使用这些版本并且效果很好。你可以先试试看，直到你发现实际版本有问题

2. 您可以尝试以下解决方法：

this.afMessaging.messaging.subscribe(

    (_messaging: any) => {

        messaging._next = (payload: any) = > {

            console.log(payload);

        };

    }

);