Firebase缺少角度和离子的App配置值

时间:2019-10-08 11:21:07

标签: angular firebase ionic4

我得到

FirebaseError:安装:缺少应用程序配置值。 (安装/缺少应用配置值)。

当我尝试访问用户令牌以进行通知时。

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

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

我的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).

3 个答案:

答案 0 :(得分:4)

如果某人在 Web 上遇到相同的问题,则可以尝试以下解决方案。

网络上导致此问题的主要原因是Firebase的版本已更新。

中检查导入的 firebase-messaging.js firebase-app.js 版本firebase-messaging-sw.js 文件。

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",
});

答案 1 :(得分:1)

我在我的项目中已经遇到了相同的错误,但是在我的项目中,我仅使用Angular(没有Ionic)工作。为了解决我运行的命令:

  

firebase初始化

然后再次选择所有设置。您是否使用firebase CLI?如果没有,强烈建议您这样做。您可以使用以下命令安装firebase-tools并启动项目,而无需复制和粘贴auth:

  

npm install -g firebase-tools   完整的文档在这里:   https://firebase.google.com/docs/?authuser=0

答案 2 :(得分:0)

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