1

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.

1 Answer 1

5

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.