CODEWITHSUNDEEP
angularfirebasefirebase-cloud-messaging
wavrik
wavrik

Reputation: 361

firebase.messaging is not a function in Angular 9

I followed line by line this tutorial: https://medium.com/mighty-ghost-hack/angular-8-firebase-cloud-messaging-push-notifications-cc80d9b36f82

How to simply put a notification web to my Angular 9 project, in my Angular CLI i put:

    "assets": [
      "src/favicon.ico",
      "src/assets",
      "src/firebase-messaging-sw.js",
      "src/manifest.json"
    ],

This is my firebase-messagin-sw.js

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-analytics.js');

firebase.initializeApp({
  apiKey: ******************,
  authDomain: ******************,
  databaseURL: ******************,
  projectId: ******************,
  storageBucket: ******************,
  messagingSenderId: ******************,
  appId: ******************,
  measurementId: ******************
});
console.log(firebase);
const messaging = firebase.messaging();

This file is in my root project and my Notification Service I create this:

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs';


@Injectable()
export class NotificationService {

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

When my application is loaded I get this error: Uncaught TypeError: firebase.messaging is not a function, like the Angular CLI not loaded the js file but when I use this console.log(firebase) it gives to me a javascript object that doesn't have this function and after this error:

I get this another error : TypeError: Failed to update a ServiceWorker for scope ('http://localhost:4200/firebase-cloud-messaging-push-scope')

What I'm doing wrong?

Upvotes: 2

Views: 1340

Answers (1)

Shri Hari L
Shri Hari L

Reputation: 4923

As far as I understand your question, I would like to answer it.
I think you could also add this one on your firebase-messagin-sw.js.

importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js');

For an optimal experience using Cloud Messaging, also add the Firebase SDK for Analytics.

importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-analytics.js');

For further reference: https://firebase.google.com/docs/web/setup#expandable-8

Upvotes: 3

Related Questions