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

Question

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.

Answer 1

For error "Property 'onMessage' does not exist on type '{}'" I just added the object type to _messaging and now application runs:

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

Using this dependencies:

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

Answer 2

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

Answer 3

This one worked for me:

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

Answer 4

try this it will work-

import { AngularFireMessaging } from '@angular/fire/compat/messaging';