未处理的承诺拒绝：this._next 不是函数：@angular/fire/messaging 中的区域

Posted 2023-02-24

技术标签:

【中文标题】未处理的承诺拒绝：this._next 不是函数：@angular/fire/messaging 中的区域【英文标题】：Unhandled Promise rejection: this._next is not a function : Zone in @angular/fire/messaging 【发布时间】：2020-01-29 06:34:14 【问题描述】：

当我在前台接收到 Firebase 推送通知时，使用 @angular/fire/messaging。方法是：

  this.angularFireMessaging.messages.subscribe(
      (payload) => 
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      )

让我分享我的完整代码：PushNotificationsService Code我写的。

我的 Angular-cli 版本：

Angular CLI: 8.1.3
Node: 12.4.0
OS: linux x64
Angular: 8.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.3
@angular-devkit/build-angular     0.801.3
@angular-devkit/build-optimizer   0.801.3
@angular-devkit/build-webpack     0.801.3
@angular-devkit/core              8.1.3
@angular-devkit/schematics        8.1.3
@angular/fire                     5.3.0
@ngtools/webpack                  8.1.3
@schematics/angular               8.1.3
@schematics/update                0.801.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.2

让我分享一下我的 package.json 文件：package.json

我在前台收到消息时收到以下错误：

Unhandled Promise rejection: this._next is not a function ; Zone: <root> ; Task: ServiceWorkerContainer.addEventListener:message ; Value: TypeError: "this._next is not a function"
    next RxJS
    messageEventListener index.esm.js:1046
    step tslib.es6.js:99
    verb tslib.es6.js:80
    __awaiter tslib.es6.js:73
    ZoneAwarePromise Angular
    __awaiter tslib.es6.js:69
    messageEventListener index.esm.js:1035
    WindowController index.esm.js:876
    Angular 5
 next@http://localhost:4200/vendor.js:111323:18
./node_modules/@firebase/messaging/dist/index.esm.js/WindowController.prototype.messageEventListener/</<@http://localhost:4200/firebase-messaging.js:2418:34
step@http://localhost:4200/vendor.js:127272:23
verb/<@http://localhost:4200/vendor.js:127253:53
__awaiter/<@http://localhost:4200/vendor.js:127246:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:3882:29
__awaiter@http://localhost:4200/vendor.js:127242:12
./node_modules/@firebase/messaging/dist/index.esm.js/WindowController.prototype.messageEventListener@http://localhost:4200/firebase-messaging.js:2407:71
WindowController/<@http://localhost:4200/firebase-messaging.js:2248:26
invokeTask@http://localhost:4200/polyfills.js:3397:31
runTask@http://localhost:4200/polyfills.js:3174:47
invokeTask@http://localhost:4200/polyfills.js:3471:34
invokeTask@http://localhost:4200/polyfills.js:4609:14
globalZoneAwareCallback@http://localhost:4200/polyfills.js:4635:27

任何帮助都是非常值得赞赏的！ CODE: GITHUB REPO LINK

我已经从 GitHub 代码中的 firebase 更新了我的密钥

【问题讨论】：

【参考方案1】：

有解决办法。

您需要稍微修改一下您的自定义消息服务。

在构造函数内部你需要替换以下代码

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

这样

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

然后即使您在前台也会收到推送通知。

【讨论】：

【参考方案2】：

试试这个版本：

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

效果很好……

检查此回购：Angular Push Notification

【讨论】：

【参考方案3】：

是的，我意识到我在 package.json 中使用了与“firebase”不兼容的“@angular/fire”：“^5.3.0”的错误版本：“^7.6.2” .

那么，我做了什么-

在 firebase-messaging-sw.js 或 service worker 文件中？

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

应该与 package.json 上的 firebase 具有相同的版本

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

而且它的作用就像一个魅力。

【讨论】：

【参考方案4】：

解决方法详解here。

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

【讨论】：

【参考方案5】：

问题确实和Firebase的版本有关！最后发现解决方法很详细here。

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

【讨论】：