Angular 8 firebase push notification not showing on foreground

The push notification is working fine when the app is in the background. But When I switch to the foreground the notification is not showing. I have used yarn install to update firebase package when it showed error The notification is delayed response in foreground and showing the notification sometime later as push notification in background.

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');
firebase.initializeApp({
   my config
});
const messaging = firebase.messaging();
self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  event.waitUntil(self.clients.openWindow(event.notification.data.url));
});

messaging.service.ts

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
import { NotificationService } from '../services/notification/notification.service';

@Injectable()
export class MessagingService {
currentMessage = new BehaviorSubject(null);
constructor(private angularFireMessaging: AngularFireMessaging,
    private notificationService:NotificationService) {
this.angularFireMessaging.messaging.subscribe(
(_messaging) => {
_messaging.onMessage = _messaging.onMessage.bind(_messaging);
_messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
}
)
}
requestPermission(userid:any) {
this.angularFireMessaging.requestToken.subscribe(
(token) => {
    var t={};
    t["FCMToken"]=token;
    t["CandidateID"]=userid;
    t["DeviceType"]=2;
    this.notificationService.FcmAddDevice(t).subscribe(data=>{
        var response=data;
      });
console.log(token);
},
(err) => {
console.error('Unable to get permission to notify.', err);
}
);
}
receiveMessage() {
    console.log("service initialized")
this.angularFireMessaging.messages.subscribe(
(payload:any) => {
    console.log("new message received. ", payload);
    const NotificationOptions = {
            body: payload.notification.body,
            data: payload.data,
            icon: payload.notification.icon
          }
          navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
            registration.showNotification(payload.notification.title, NotificationOptions);
          });
    this.currentMessage.next(payload);})
}
}

I am using

Angular CLI: 8.3.29
Node: 14.16.0
OS: win32 x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.29
@angular-devkit/build-angular     0.803.29
@angular-devkit/build-optimizer   0.803.29
@angular-devkit/build-webpack     0.803.29
@angular-devkit/core              8.3.29
@angular-devkit/schematics        8.3.29
@angular/cli                      8.3.29
@angular/fire                     5.4.2
@angular/http                     7.2.16
@ngtools/webpack                  8.3.29
@schematics/angular               8.3.29
@schematics/update                0.803.29
rxjs                              6.6.7
typescript                        3.5.3

firebase 7.6.0 However this works when i have tried the same with a sample app.