FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). Angular 15

[VictorKabine2]

I am getting this error on my firebase app, here is my service worker file firebase-messaging-sw.js:

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

export const app = initializeApp({
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXX-XXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXXX-XXXXX",
  storageBucket: "XXXXXXXXXXX-XXXXXXXXXXXXX",
  messagingSenderId: "XXXXXXXXXX--XXXXX",
  appId: "XXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXX-X",
  measurementId: "XXXXXXX---XXXXXXXXXX"
});

export const db = getFirestore(app);
export const auth = getAuth(app);

import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs";
import {AngularFireMessaging} from "@angular/fire/compat/messaging";
import { getMessaging, getToken } from "firebase/messaging";



@Injectable({
  providedIn: 'root'
})

export class MessagingService {

  currentMessage = new BehaviorSubject(null);

  constructor(private angularFireMessaging: AngularFireMessaging) {
  }

  requestPermission() {
    console.log('Requesting permission...');
    Notification.requestPermission().then((permission) => {
      if (permission === 'granted') {
        console.log('Notification permission granted.');
      }
    })
  }

    requestForToken = () => {
      if ("serviceWorker" in navigator) {
        navigator.serviceWorker.register("./firebase-messaging-sw.js").then(function(registration) {
          console.log("Registration successful, scope is:", registration.scope);
        })
      }
    return getToken(getMessaging(), { vapidKey: '' }) //ERROR OCCURS HERE
      .then((currentToken) => {
        if (currentToken) {
          console.log('current token for client: ', currentToken);
          // Perform any other neccessary action with the token
        } else {
          // Show permission request UI
          console.log('No registration token available. Request permission to generate one.');
        }
      })
      .catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
      });
  };

}

Here is my app component file:

import { Component, OnInit } from '@angular/core';
import {Message} from "./models/message";
import {AngularFireMessaging} from "@angular/fire/compat/messaging";
import {HttpClient} from "@angular/common/http";
import {MessagingService} from "./messaging.service";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'untitled3';

  messages: Array<Message> = [];

  constructor(private msg: AngularFireMessaging, private http: HttpClient, private service: MessagingService) { }

  ngOnInit() {
    this.service.requestPermission();
    let x = this.service.requestForToken();
    console.log(x);

  }
}

Please see the stacktrace below for the detailed error:

ERROR FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).
at initializeApp (index.esm2017.js:423:29)
at getApp (index.esm2017.js:476:16)
at getMessagingInWindow (index.esm2017.js:1159:43)
at MessagingService.requestForToken (messaging.service.ts:47:33)
at AppComponent.ngOnInit (app.component.ts:23:26)
at callHook (core.mjs:2450:22)
at callHooks (core.mjs:2419:17)
at executeInitAndCheckHooks (core.mjs:2370:9)
at refreshView (core.mjs:10357:21)
at detectChangesInternal (core.mjs:11545:9)
I am using Angular Please assist. I have tried the following approaches

I tried adding the auth information

I Tried registering the service worker on both the index and the messaging service class

I tried calling the service worker module on the app module and calling the register there

Still no luck

[murphman300]

requires attention - this happened after an accidental firebase nested dependency update today

These kinds of breaking changes should not be happening.

[VictorKabine2]

No clue @samateja , I would like to apologize @murphman300 for some reason I thought you worked at firebase. Sorry

[hsubox76]

Is this filed as an issue? If not, can you file it as an issue? We aren't set up to track issues posted in discussions. I'm already looking into it now but if everyone can provide more details in the issue that either exists or someone creates, like if everyone is doing this in the service worker like the original example, or somewhere else, that would be really helpful.

[hsubox76]

I've made an issue, please add further info here: #7262

[agustinnigrelli]

Yesterday i started to get this error with getStorage() from "firebase/storage".

[hsubox76]

Please go to the issue for further discussion: #7262