從 Angular Ionic 項目中的“@firebase/app”導入 { Firebase } 時出錯

Question

I'm following this tutorial https://daviddalbusco.medium.com/add-web-push-notifications-to-your-ionic-pwa-358f6ec53c6f to make my Ionic Angular App a PWA and also add web push notifications to my app .

當我到達本節時：

import {Injectable} from '@angular/core';
import {firebase} from '@firebase/app';
import '@firebase/messaging';
import {environment} from '../environments/environment';
@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);
        });
    });
  }
}

我收到 { Firebase } 的以下錯誤：

模塊 '"@firebase/app"' 沒有導出的成員 'Firebase'.ts(2305)

我試過只使用 import Firebase from '@firebase/app' 但這只會在代碼中進一步引發消息傳遞（）方法的錯誤。

我對如何解決這個問題有點茫然，因為教程已經有幾年了。

Answer 1

本教程於 2019 年發布，並未使用使用函數式語法的新Firebase Modular SDK ( v9.0.0+ )。 如果您想繼續使用舊的命名空間語法並暫時按照教程進行操作，請使用兼容版本：

import firebase from 'firebase/compat/app';
import 'firebase/compat/messaging';

但是，這些兼容版本將來會被刪除，所以我建議升級到最新的語法。 您可以在上面鏈接的文檔中了解更多信息。