Angular 15中FirebaseError(app/no-options)错误排查求助

在基于Angular 15开发的Firebase应用中，遇到以下错误：

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

相关代码 #

firebase-messaging-sw.js（Service Worker文件） #

import { initializeApp } from "firebase/app";
import {getAuth} from "@angular/fire/auth";
import {getMessaging} from "firebase/messaging";


const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXX-XXXXXXX",
  authDomain: "XXXXXXXXXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXX",
  projectId: "XXXXXXXXX-XXXXXXXXX-XXXXXXXX",
  storageBucket: "XXXXXXXXXXX-XXXXXXXXX",
   messagingSenderId: "XXXXXXXXXX-XXX",
  appId: "XXXXXXXXXXXX-XXXXXXXX-XXXXXX",
  measurementId: "XXX-XXXXXX-XXXXXXX"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
const db = app.firestore();
const messaging = getMessaging();

messaging.service.ts（消息服务文件） #

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: '' }) // 错误发生在此处
      .then((currentToken) => {
        if (currentToken) {
          console.log('current token for client: ', currentToken);
          // 执行其他与token相关的必要操作
        } else {
          // 显示权限请求UI
          console.log('No registration token available. Request permission to generate one.');
        }
      })
      .catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
      });
  };

}

app.component.ts（根组件文件） #

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

  }
}

详细错误栈 #

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)

已尝试的解决方案（未解决问题） #

• 添加认证信息
• 在index页面和messaging服务类中注册Service Worker
• 在AppModule中调用Service Worker模块并完成注册

内容的提问来源于stack exchange，提问作者victor kabini