Angular 17集成FCM报错：@angular/fire/messaging无AngularFireMessaging导出成员

问题描述 #

在Angular 17独立项目中使用AngularFire 17.0.1集成FCM，执行import { AngularFireMessaging } from '@angular/fire/messaging';时，报错提示：模块“@angular/fire/messaging”没有导出成员“AngularFireMessaging”

项目依赖配置 #

"dependencies": {
    "@angular/animations": "^17.1.0",
    "@angular/common": "^17.1.0",
    "@angular/compiler": "^17.1.0",
    "@angular/core": "^17.1.0",
    "@angular/fire": "^17.0.1",
    "@angular/forms": "^17.1.0",
    "@angular/platform-browser": "^17.1.0",
    "@angular/platform-browser-dynamic": "^17.1.0",
    "@angular/router": "^17.1.0",
    "@angular/service-worker": "^17.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },

app.config.ts 代码 #

import { getFirestore, provideFirestore } from '@angular/fire/firestore';
import {
  ApplicationConfig,
  isDevMode,
  importProvidersFrom,
} from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideServiceWorker } from '@angular/service-worker';
import { initializeApp, provideFirebaseApp } from '@angular/fire/app';
import { getMessaging, provideMessaging } from '@angular/fire/messaging';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000',
    }),
    importProvidersFrom(
      provideFirebaseApp(() =>
        initializeApp({
          projectId: 'fcm-sample-angular',
          appId: '1:1046462604051:web:0d5617d33eaa539e3470e6',
          storageBucket: 'fcm-sample-angular.appspot.com',
          apiKey: 'AIzaSyAgmv9SgWL-lXKiTY9lFw6b1drGwzttdDM',
          authDomain: 'fcm-sample-angular.firebaseapp.com',
          messagingSenderId: '1046462604051',
          measurementId: 'G-BNNWXP8NK5',
        })
      )
    ),
    importProvidersFrom(provideMessaging(() => getMessaging()), provideFirestore(() => getFirestore())),
    
  ],
};

解决方法 #

AngularFire 17+ 已移除AngularFireMessaging类，改用与Firebase JS SDK直接对齐的API，按以下方式调整：

1. 注入messaging实例
   在组件或服务中，使用injectMessaging获取Firebase Messaging实例：

import { injectMessaging } from '@angular/fire/messaging';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private messaging = injectMessaging();

  // 请求通知权限并获取FCM Token
  async requestNotificationPermission() {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
      const token = await this.messaging.getToken();
      console.log('FCM Token:', token);
      // 可将Token发送至后端保存
    }
  }
}

2. 监听消息
   直接使用messaging实例的方法监听前台/后台消息：

import { injectMessaging } from '@angular/fire/messaging';
import { Component, OnInit } from '@angular/core';
import { onMessage } from 'firebase/messaging';

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

  ngOnInit() {
    // 监听前台消息
    onMessage(this.messaging, (payload) => {
      console.log('收到前台消息:', payload);
      // 自定义消息展示逻辑
    });
  }
}

3. 确认配置有效性
   当前app.config.ts中provideMessaging的配置已正确，无需修改，确保Firebase配置信息准确即可。

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