Angular+Firebase FCM推送配置遇NullInjectorError求助

错误原因分析 #

你遇到的NullInjectorError主要来自三个核心问题：

1. 新旧Firebase API混合冲突：同时使用了@angular/fire 7+的新独立提供者（provideFirebaseApp、provideMessaging）和旧的Compat模块（AngularFireMessagingModule、AngularFireMessaging），导致依赖注入体系混乱，找不到angularfire2.app.options注入令牌。
2. AppComponent依赖注入缺失：ngOnInit中调用了this.messagingService，但构造函数未注入MessagingService，会引发未定义错误。
3. MessagingService代码漏洞：saveDeviceToken函数引用了未定义的fcmToken变量。

具体修复步骤 #

1. 修复AppComponent的注入问题

修改app.component.ts，在构造函数中添加MessagingService注入：

import { Component } from '@angular/core';
import { Storage } from '@ionic/storage';
import { MessagingService } from './services/messaging.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent {
  // 注入MessagingService
  constructor(private storage: Storage, private messagingService: MessagingService) {}

  async ngOnInit() {
    await this.storage.create();
    this.messagingService.saveDeviceToken();
  }
}

2. 统一Firebase Messaging使用方式（推荐模块化API）

结合你的firebase v9+版本，推荐使用原生模块化API，放弃旧的AngularFire Compat模块：

2.1 更新app.module.ts

移除AngularFireMessagingModule，保留新的独立提供者配置：

// 可删除AngularFireMessagingModule的导入
// import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    provideFirebaseApp(() => initializeApp(environment.firebase)), 
    provideAnalytics(() => getAnalytics()), 
    provideAuth(() => getAuth()), 
    provideFirestore(() => getFirestore()), 
    provideFunctions(() => getFunctions()), 
    provideMessaging(() => getMessaging()), 
    providePerformance(() => getPerformance()), 
    provideStorage(() => getStorage())
    // 移除AngularFireMessagingModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, 
    ScreenTrackingService,
    Storage,
    UserTrackingService
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2.2 重构MessagingService

直接使用Firebase原生API，不再依赖AngularFireMessaging：

import { Injectable } from '@angular/core';
import { getMessaging, getToken } from "firebase/messaging";
import { environment } from '../environments/environment'; // 确保导入环境配置

@Injectable({
  providedIn: 'root'
})
export class MessagingService {
  messaging = getMessaging();

  constructor() { }

  async saveDeviceToken () {
    try {
      const fcmToken = await getToken(this.messaging, {
        vapidKey: environment.firebase.vapidKey // 从Firebase控制台获取VAPID密钥
      });
      console.log('token', fcmToken);
      // 此处可添加将token保存到后端的逻辑
    } catch (error) {
      console.log('获取token失败', error);
    }
  }
}

备选方案：继续使用Compat模块（不推荐）

若坚持使用旧Compat模块，需修改app.module.ts，用AngularFireModule.initializeApp替代新的初始化方式：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireMessagingModule } from '@angular/fire/compat/messaging';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AngularFireModule.initializeApp(environment.firebase), // 改用旧初始化方式
    AngularFireMessagingModule
    // 移除所有provideXXX的配置
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, 
    ScreenTrackingService,
    Storage,
    UserTrackingService
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

同时保留MessagingService中的AngularFireMessaging注入，确保environment.firebase配置完整。

额外注意事项 #

• 确保environment.firebase配置包含正确的apiKey、authDomain、projectId，以及FCM所需的vapidKey（在Firebase控制台「项目设置」->「云消息传递」中获取）。
• PWA需配置manifest.json和service-worker才能接收推送通知，务必完成这部分配置。

内容的提问来源于stack exchange，提问作者D.Hodges