FirebaseError: Installations: Missing App configuration values. (installations/missing-app-config-values) #2220
Description
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.