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

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

Continue reading...