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.

Garik

Answer 1

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

Rufus

This gives another type error: Property 'onMessage' does not exist on type '{}' @angular/[email protected] | [email protected] – Rhodos

Answer 2

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",

Ramulose

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

Carrell

Answer 4

try this it will work-

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

Seville

Answer 5

I change the version of @angular/fire and its work

npm i @angular/[email protected] --save

Launceston

Answer 6

I try this,

npm i @angular/[email protected] --save

and, maybe when running, just found error also like"Property 'automaticDataCollectionEnabled' is missing in type 'FirebaseApp'"

and then i open file firebase.app.module.d.ts just edit like this.

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

Farleigh