Module '"@angular/fire/messaging"' has no exported member 'AngularFireMessaging'.ts(2305)

Question

I am trying to work on Push notifications using Angular and Firebase. After adding the firebase packages in the service worker file I am getting above mentioned Issue

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

  requestPermission() {
    this.angularFireMessaging.requestToken.subscribe(
      (token: any) => {
        console.log(token);
      },
      (err: any) => {
        console.error('Unable to get permission to notify.', err);
      }
    );
  }
  
  receiveMessage() {
    this.angularFireMessaging.messages.subscribe(
      (payload: null) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      })
  }
}

This is my code Package.json details are as follows "@angular/fire": "^7.4.1", "firebase": "^9.9.2",

Answer 1

How about changing it to

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

Refer here