angular 和 ionic 中的 Firebase 缺少应用程序配置值

Question

我得到

FirebaseError：安装：缺少应用程序配置值。 (installations/missing-app-config-values).

当我尝试访问用户令牌以获取通知时。

这是我的 firebase-messaging-sw.js 在 src 文件夹中：-

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'
});

在我的环境文件中有这个

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

在我的 app.component.ts

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

Ang 我的 notification.service.ts 文件

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();
    });
}
}

当我使用 ionic build 构建项目时，最初浏览器会询问我的权限，在授予权限后我得到-

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

Answer 1

我已经在我的项目中遇到了同样的错误，但在我的项目中我只使用 Angular（没有 Ionic ）。要解决我运行命令：

firebase init

并select 再次进行所有设置。你使用 firebase CLI 吗？如果没有，强烈建议这样做。您可以安装 firebase-tools 并启动项目，无需使用以下命令复制和粘贴 auth：

npm install -g firebase-tools The full documentation is here: https://firebase.google.com/docs/?authuser=0

Answer 2

我通过添加 firebase 工具解决了这个问题 npm -g install firebase-tools 并在应用中添加 firebase 项目 firebase use --add

Answer 3

如果有人在 Web 上遇到同样的问题，那么他们可以尝试以下解决方案。

在 web 上导致此问题的主要原因是更新了 firebase 版本。

检查你导入的 firebase-messaging.js 和 firebase-[= firebase-messaging-sw.js 文件中的 49=] 个版本。

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

如果您的 firebase 版本已更新，则只有 messagingSenderId 在您的 firebase-messaging-sw.js 文件中不起作用。您必须提供所有其他参数，例如。 apiKey、projectId、appId 以及 messagingSenderId.

例如

在您的 firebase-messaging-sw.js

中提供所有这些

firebase.initializeApp({
        apiKey: "api-key",
        authDomain: "project-id.firebaseapp.com",
        databaseURL: "https://project-id.firebaseio.com",
        projectId: "project-id",
        storageBucket: "project-id.appspot.com",
        messagingSenderId: "sender-id",
        appId: "app-id",
});

angular 和 ionic 中的 Firebase 缺少应用程序配置值

Firebase Missing App configuration values in angular and ionic

firebase

angular

ionic4