Firebase初始化报错：未创建DEFAULT应用，求解决方案

以下是针对你遇到的FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app)错误的具体排查步骤，结合你提到的三个文件逐一分析：

1. 确认App.module.ts中的Firebase初始化完整性 #

确保你的AngularFire初始化代码正确且无遗漏：

• 必须在imports数组中调用AngularFireModule.initializeApp()，传入完整的Firebase配置对象：

  // App.module.ts
  import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { AngularFireModule } from '@angular/fire/compat';
  import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';
  
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_AUTH_DOMAIN",
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_STORAGE_BUCKET",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };
  
  @NgModule({
    imports: [
      BrowserModule,
      AngularFireModule.initializeApp(firebaseConfig), // 必须放在最前面
      AngularFireMessagingModule
    ],
    // ...其他配置
  })
  export class AppModule { }
  

• 检查是否有条件判断包裹初始化代码（比如环境变量判断），导致初始化逻辑未执行。

2. 修复firebase-messaging-sw.js的独立初始化 #

Service Worker是独立于Angular应用的进程，不能依赖App.module中的初始化，必须单独初始化Firebase：

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging.js');

// 使用和App.module中完全一致的配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化DEFAULT App
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

// 可选：处理后台消息
messaging.onBackgroundMessage(payload => {
  console.log('后台消息:', payload);
});

• 确保SW中使用的Firebase SDK版本与Angular项目中安装的firebase包版本一致，避免兼容性冲突。
• 在angular.json的assets数组中添加该文件，确保能被浏览器访问：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    "src/firebase-messaging-sw.js" // 添加这一行
  ]
  

3. 规范App.component.ts中Token获取的时机 #

不要在组件构造函数中直接调用FCM API，需等待AngularFire初始化完成，建议使用AngularFireMessaging服务：

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/compat/messaging';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private afMessaging: AngularFireMessaging) {}

  ngOnInit(): void {
    // 请求权限并获取Token
    this.afMessaging.requestToken.subscribe(
      token => {
        if (token) {
          console.log('FCM Token:', token);
          // 这里可以将Token发送到后端存储
        }
      },
      error => {
        console.error('Token获取失败:', error);
      }
    );
  }
}

• 避免直接使用firebase.messaging()，因为AngularFire封装的服务会确保Firebase App已初始化后再执行操作。

4. 其他排查点 #

• 确认已安装匹配版本的依赖：执行npm install @angular/fire firebase，确保@angular/fire版本与你的Angular版本兼容（比如Angular 16对应@angular/fire 7.6.x）。
• 清除浏览器缓存和Service Worker：在Chrome DevTools的Application > Service Workers中点击Unregister，然后刷新页面重新加载。
• 检查浏览器是否支持Service Worker：确保在HTTPS环境下测试（localhost除外），因为Service Worker仅在安全域名下生效。

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