Angularfire: FirebaseError: Installations: Missing App configuration values. (installations/missing-app-config-values)

[chirmac]

Version info

**Angular: 8.2.8

**Firebase: 7.1.0

**AngularFire: 5.2.1

How to reproduce these conditions

The service worker (firebase-messaging-sw.js)

// 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({
  apiKey: 'xxxx',
  authDomain: 'xxxx',
  databaseURL: 'xxxx',
  projectId: 'xxxx',
  storageBucket: 'xxxxx',
  messagingSenderId: 'xxxx'
});

// 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 (manifest.json)

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

The imports in the app.module.ts

imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularFireModule.initializeApp(environment.firebase),
    FirebaseModule,
    AngularFireMessagingModule,
    FormsModule,
    MaterialModule,
    FlexLayoutModule,
    ReactiveFormsModule,
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([ReservationsEffects, ServicesEffects, AuthEffects, HotelEffects]),
    MglTimelineModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
  ],

And the component:

import { Component, OnInit } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { exhaustMap, tap } from 'rxjs/operators';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
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); });
  }
}

Steps to set up and reproduce

Simply create a firebase project and setup FCM, replace the firebase config in the project and try to setup FCM in the Angular app.

Debug output

ERROR FirebaseError: Installations: Missing App configuration values. (installations/missing-app-config-values).
at extractAppConfig (http://localhost:4200/firebase-messaging.js:108:29)
at Object.factoryMethod [as installations] (http://localhost:4200/firebase-messaging.js:1129:9)
at FirebaseAppImpl.push../node_modules/@firebase/app/dist/index.cjs.js.FirebaseAppImpl._getService (http://localhost:4200/vendor.js:170951:66)
at FirebaseAppImpl.firebaseAppImpl. [as installations] (http://localhost:4200/vendor.js:171218:35)
at http://localhost:4200/firebase-messaging.js:1578:41
at step (http://localhost:4200/polyfills.js:3127:23)
at Object.next (http://localhost:4200/polyfills.js:3108:53)
at http://localhost:4200/polyfills.js:3101:71
at new ZoneAwarePromise (http://localhost:4200/polyfills.js:4111:29)
at __awaiter (http://localhost:4200/polyfills.js:3097:12)

* Screenshots *

Expected behavior

To get the client's token and send it to the database.

Actual behavior

FCM module fails to work, presenting that error.

[Vesuviante]

This ERROR happens to me only on Firefox && in localhost
Do you use firebaseui?
I think that in my case is a firebaseui error
ciao

[naveedahmed1]

I'm facing same issue. It works fine with firebase 6.x but throws error on firebase 7.x

[naveedahmed1]

Though there are some breaking changes in firebase 7.x and as per the docs I have enabled the FCM Registration API for my project in the Google Cloud Console, but still receiving this error:

Reference:
https://firebase.google.com/support/release-notes/js#version_700_-_september_26_2019

Breaking change: version 7.0.0 introduces a new service related to client app instance registration. If you are currently using FCM for web and want to upgrade to SDK 7.0.0 or later, you must enable the FCM Registration API for your project in the Google Cloud Console.

When you enable this service, make sure you are logged in to Cloud Console with the same Google account you use for Firebase, and make sure to select the correct project. No other migration tasks are required; once the API is enabled, pre-7.0.0 apps will continue to function normally.

[Odonno]

Same error. Did anyone fixed this error?

[Odonno]

Ok. Resolved. The appId is definitely not the projectId. And I have a hard time finding what it is, or how to get it. In order to get the appId, you need to create an app registration (android, iOS or web) in the Firebase Console. You then will get all the keys including the appId.

The documentation was inexistant on this.. At least, how to get the appId would be great.

Thank you.

[naveedahmed1]

@Odonno thanks for sharing this, were you able use it with firebase 7.x?

[Odonno]

Yes, I do not have any error now. But I need to send/receive push notification to see it if really works. :)

[ibaldo]

Same error here. Looking for a work around.

[Odonno]

@ibaldo Did you create a web project in the Firebase console? You should see a property called appId in the generated config file.

[inomdzhon]

Work for me after set apiKey, projectId, appId

firebase.initializeApp({
  apiKey: '...',
  projectId: '...',
  appId: '...',
  messagingSenderId: '...',
});

Only one field was needed in the past :(

[Odonno]

@inomdzhon Yes, feed them all. That cannot do harm.

[HectorRPL]

Hello work to me:
console firebase > project > project overview (house icon) > mesh icon > setting project > general > in Firebase SDK snippet
section select settings or configuration.

And the object is generated automaticament.