Trying to use AngularFire's Cloud Messaging Angular module throws Missing App configuration values

Question

I'm setting Firebase Cloud Messaging on my Angular app, using AngularFire2, to receive and send notifications. However, when trying to get the user's current token, the app returns an error.

I already created the "firebase-messaging-sw.js" and "manifest.json" files to register the service worker and added everything correctly but with no success.

The component where I subscribe to the observable.

export class HomeComponent implements OnInit {
  constructor(
    private afMessaging: AngularFireMessaging,
    private afStore: AngularFirestore,
    private afAuth: AngularFireAuth,
  ) {}

  ngOnInit() {
    this.afAuth.user.pipe(
      exhaustMap(
        user => {
          return this.afMessaging.getToken.pipe(
            tap(
              token => {
                console.log(token);
                this.afStore.collection('users').doc(user.uid).update({
                  fcmToken: token
                });
              }
            )
          );
        }
      )
    ).subscribe();
    this.afMessaging.messages
      .subscribe((message) => { console.log(message); });
  }
}

The service worker:

  // Give the service worker access to Firebase Messaging.
  // Note that you can only use Firebase Messaging here, other Firebase libraries
// are not available in the service worker.
importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/6.3.4/firebase-messaging.js");

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp({
  messagingSenderId: "231973795174"
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log(
    "[firebase-messaging-sw.js] Received background message ",
    payload
  );
  // Customize notification here
  const notificationTitle = "Background Message Title";
  const notificationOptions = {
    body: "Background Message body.",
    icon: "/firebase-logo.png"
  };

  return self.registration.showNotification(
    notificationTitle,
    notificationOptions
  );
});

The manifest

{
  "name": "App",
  "gcm_sender_id": "103953800507"
}

The Angular.json

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

The error I get, in detail, is bellow:

Uncaught (in promise): FirebaseError: Installations: Missing App configuration values. (installations/missing-app-config-values). FirebaseError: Installations: Missing App configuration values. (installations/missing-app-config-values). at extractAppConfig (index.esm.js:89) at Object.factoryMethod [as installations] (index.esm.js:1110) at FirebaseAppImpl.push../node_modules/@firebase/app/dist/index.cjs.js.FirebaseAppImpl._getService (index.cjs.js:191) at FirebaseAppImpl.firebaseAppImpl. [as installations] (index.cjs.js:458) at index.esm.js:415 at step (tslib.es6.js:99) at Object.next (tslib.es6.js:80) at tslib.es6.js:73 at new ZoneAwarePromise (zone-evergreen.js:876) at __awaiter (tslib.es6.js:69) at resolvePromise (zone-evergreen.js:797) at zone-evergreen.js:707 at zone-evergreen.js:723 at ZoneDelegate.invoke (zone-evergreen.js:359) at Object.onInvoke (core.js:39698) at ZoneDelegate.invoke (zone-evergreen.js:358) at Zone.run (zone-evergreen.js:124) at zone-evergreen.js:855 at ZoneDelegate.invokeTask (zone-evergreen.js:391) at Object.onInvokeTask (core.js:39679)

Jim Jimson Jim Jimson · Accepted Answer · 2020-06-18T11:29:21

You need to fill all the required details in your initializeApp call:

const firebaseConfig = {
apiKey: "",
authDomain: "<your app>.firebaseapp.com",
databaseURL: "https://<your app>.firebaseio.com",
projectId: "<your app>",
storageBucket: "<your app>.appspot.com",
messagingSenderId: "<your sender id>",
appId: "<your app id>",
measurementId: "<your measurement id>"
  };

You can get these details from the Firebase console.

Trying to use AngularFire's Cloud Messaging Angular module throws Missing App configuration values

1 Answers