[FIXED] Error with import { Firebase } from '@firebase/app' in Angular Ionic project


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';
    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()) {

            const messaging = firebase.messaging();

            // Register the Service Worker

            // Initialize your VAPI key

            // Optional and not covered in the article
            // Listen to messages when your app is in the foreground
            messaging.onMessage((payload) => {
            // Optional and not covered in the article
            // Handle token refresh
            messaging.onTokenRefresh(() => {
                (refreshedToken: string) => {
                }).catch((err) => {

        }, (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.


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.

Answered By – Dharmaraj

Answer Checked By – Mary Flores (FixeMe Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *