在 Angular Ionic 项目中从“@firebase/app”导入 { Firebase } 时出错

Question

我正在按照本教程https://daviddalbusco.medium.com/add-web-push-notifications-to-your-ionic-pwa-358f6ec53c6f使我的 Ionic Angular 应用程序成为 PWA，并向我的应用程序添加网络推送通知。

当我到达此部分时：

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' 但这只会在代码中进一步引发 messages() 方法的错误。

由于该教程已有几年历史，我对如何解决此问题感到有点茫然。

Answer 1

该教程于 2019 年发布，并未使用采用函数式语法的新Firebase Modular SDK ( )。v9.0.0+如果您想继续使用旧的命名空间语法并暂时按照教程进行操作，请使用兼容版本：

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

但是，这些兼容版本将来将被删除，因此我建议升级到最新的语法。您可以在上面链接的文档中了解更多信息。