FCM Messaging Issue

Question

I am trying to generate token from FCM by following this link. I am facing issue in messaging.service. I couldn't implement angularFireMessaging.messaging, its shrowing error in messaging keyword as

Property 'messaging' does not exist on type 'AngularFireMessaging'

Code

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(  //issue here in messaging
      (_messaging) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      }
    )
  }
  requestPermission() {
    this.angularFireMessaging.requestToken.subscribe(
      (token) => {
        console.log(token);
      },
      (err) => {
        console.error('Unable to get permission to notify.', err);
      }
    );
  }
  receiveMessage() {
    this.angularFireMessaging.messages.subscribe(
      (payload) => {
        console.log("new message received. ", payload);
        this.currentMessage.next(payload);
      })
  }
}

Where I am going wrong please help me out

Answer 1

I think going back to an older version is not an ideal solution. I think the author of this question followed a tutorial is a bit out of date.

For the latest version,

 this.angularFireMessaging.messaging.subscribe(  //issue here in messaging
  (_messaging) => {
    _messaging.onMessage = _messaging.onMessage.bind(_messaging);
    _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
  }
)

is not required

Remove everything in the constructor, and update your package.json with the latest version below (at the time of writing this answer)

"@angular/fire": "^6.0.0",
"firebase": "^7.15.1",

It will work just fine.

If you'd like to know more details, please follow this official tutorial https://github.com/angular/angularfire/blob/master/docs/messaging/messaging.md

Answer 2

Simply remove them. The error plainly told you that:

Property 'messaging' does not exist on type 'AngularFireMessaging'

From:

constructor(private angularFireMessaging: AngularFireMessaging) {
    this.angularFireMessaging.messaging.subscribe(  //issue here in messaging
      (_messaging) => {
        _messaging.onMessage = _messaging.onMessage.bind(_messaging);
        _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
      }
    )
  }

Into:

constructor(private angularFireMessaging: AngularFireMessaging) {}

Reference: https://github.com/angular/angularfire/blob/HEAD/docs/messaging/messaging.md