Search code examples
angularjsfirebasefirebase-cloud-messagingangularfire2

Property 'messaging' does not exist on type 'AngularFireMessaging' using firebase 7.14.6 and @angular/fire 6.0.0 FCM web push notification


In implementing FCM Background Web Notification getting below error in my service

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

messaging.service.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();

installed packages

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

i also tried to play with downgrading @angular/fire and firebase but no success.


Solution

  • AngularFireMessaging does not contain a property called messaging, you need to use the property 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