Firebase Missing App configuration values in angular and ionic

Question

I am getting

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

when I tried to access the user token for notification.

This is my firebase-messaging-sw.js in src folder:-

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


firebase.initializeApp({
  'messagingSenderId': 'xxxxxxxxxxxxx'
});

In my environment file i have this

firebase: {
    apiKey: '***********************',
    authDomain: '*************',
    databaseURL: '***********',
    projectId: '********',
    storageBucket: '',
    messagingSenderId: '*********',
    vapidKey : '*******************************************'
  },

And in my app.component.ts

async ngOnInit() {
    firebase.initializeApp(environment.firebase);
    await this.notificationsService.init();
  }
  ngAfterViewInit() {
    this.platform.ready().then(async () => {
     await this.notificationsService.requestPermission();
    });

Ang my notification.service.ts file

import {Injectable} from '@angular/core';
import {firebase} from '@firebase/app';
import '@firebase/messaging';
import { environment } from 'src/environments/environment.prod';
@Injectable({
    providedIn: 'root'
})
export class NotificationsService {
init(): Promise<void> {
    return new Promise<void>((resolve, reject) => {
        navigator.serviceWorker.ready.then((registration) => {
            // Don't crash an error if messaging not supported
            if (!firebase.messaging.isSupported()) {
                   resolve();
                   return;
            }

            const messaging = firebase.messaging();

            // Register the Service Worker
            messaging.useServiceWorker(registration);

            // Initialize your VAPI key
            messaging.usePublicVapidKey(
                  environment.firebase.vapidKey
            );

            // Optional and not covered in the article
            // Listen to messages when your app is in the foreground
            messaging.onMessage((payload) => {
                console.log(payload);
            });
            // Optional and not covered in the article
            // Handle token refresh
            messaging.onTokenRefresh(() => {
                messaging.getToken().then(
                (refreshedToken: string) => {
                    console.log(refreshedToken);
                }).catch((err) => {
                    console.error(err);
                });
            });

            resolve();
        }, (err) => {
            reject(err);
        });
    });
  }

  requestPermission(): Promise<void> {
    return new Promise<void>(async (resolve) => {
        if (!Notification) {
            console.log('1');
            resolve();
            return;
        }
        if (!firebase.messaging.isSupported()) {
            console.log('2');
            resolve();
            return;
        }
        try {
            const messaging = firebase.messaging();
            await messaging.requestPermission();

            const token: string = await messaging.getToken();

            console.log('User notifications token:', token);
        } catch (err) {
            // No notifications granted
            console.log( err);
        }

        resolve();
    });
}
}

When I build the project using ionic build initially browser asks me for the permission and after granting the permission I get-

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

Answer 1

i solved this issue by add firebase tool npm -g install firebase-tools and by adding firebase project in app firebase use --add