使用 Firebase 7.14.6 和 @angular/fire 6.0.0 FCM 网页推送通知的第 'AngularFireMessaging' 类中不存在属性'messaging'

Question

在实现 FCM 时Background Web Notification在我的服务中出现以下错误

error TS2339: Property 'messaging' does not exist on type 'AngularFireMessaging'

消息传递.服务.ts

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
@Injectable()
export class MessagingService {
currentMessage = new BehaviorSubject(null);
constructor(private angularFireMessaging: AngularFireMessaging) {
this.angularFireMessaging.messaging.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}
}

src/firebase-messaging-sw.js

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

firebase.initializeApp({
apiKey: "xxxxxxxxxxx",
authDomain: "xxxxxxxxxxx",
databaseURL: "xxxxxxxxxxx",
projectId: "xxxxxxxxxxx",
storageBucket: "xxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxx",
appId: "xxxxxxxxxxx"
});
const messaging = firebase.messaging();

已安装的软件包

"@angular/fire": "^6.0.0",
"firebase": "^7.14.6",
"@angular/cli": "^9.1.7",

我也尝试过降级@angular/火和火力基地，但没有成功。

Answer 1

对于错误"属性'onMessage'在类型'{}'上不存在"，我刚刚将对象类型添加到_messaging，现在应用程序运行：

this.angularFireMessaging.messages.subscribe(
(_messaging: AngularFireMessaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
})
}

使用此依赖项：

"@angular/fire": "^6.0.3",
"firebase": "^7.21.0",

Answer 2

AngularFireMessaging

不包含名为messaging的属性，您需要使用属性messages：

this.angularFireMessaging.messages.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}

https://github.com/angular/angularfire/blob/master/docs/messaging/messaging.md#subscribing-to-foreground-messages

Answer 3

这个对我有用：

this.angularFireMessaging.messages.subscribe(
(_messaging: AngularFireMessaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
})
}

Answer 4

试试这个它会起作用-

从'@angular/fire/compat/messaging'导入{ AngularFireMessaging };

Answer 5

我更改了@angular/fire的版本及其工作

npm i @angular/fire@5.1.1 --save

Answer 6

我试试这个，

npm i @angular/fire@5.1.1 --save

而且，也许在运行时，也发现了错误 例如"类型'FirebaseApp'中缺少属性'automaticDataCollectionEnabled'">

然后我打开文件Firebase.app.module.d.ts 就这样编辑吧。

export declare class FirebaseApp implements app.App {
installations(): import("firebase").installations.Installations;
performance(): import("firebase").performance.Performance;
remoteConfig(): import("firebase").remoteConfig.RemoteConfig;
analytics(): import("firebase").analytics.Analytics;
name: string;
options: {};
auth: () => FirebaseAuth;
database: (databaseURL?: string) => FirebaseDatabase;
messaging: () => FirebaseMessaging;
storage: (storageBucket?: string) => FirebaseStorage;
delete: () => Promise<void>;
firestore: () => FirebaseFirestore;
functions: (region?: string) => FirebaseFunctions;
}