Error with import { Firebase } from '@firebase/app' in Angular Ionic project-CodePudding

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.

When I get to this section:

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

I get the following error for { Firebase } :

Module '"@firebase/app"' has no exported member 'Firebase'.ts(2305)

I have tried just using import Firebase from '@firebase/app' but this just throws up errors for the messaging() method further down in the code.

I'm at a bit of a loss as to how to resolve this as the tutorial is a few years old.

CodePudding user response：

The tutorial was published in 2019 and doesn't not use the new Firebase Modular SDK (v9.0.0 ) that uses a functional syntax. If you want to keep using the older namespaced syntax and follow the tutorial for now, then use the compat versions:

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

However, these compat version will be removed in future so I'd recommend upgrading to the newest syntax. You can learn more about that in the documentation linked above.