报错TypeError: firebase.messaging is not a function，请问问题出在哪？

我来帮你排查这个常见的 Firebase 错误，这类问题基本是模块导入、版本兼容或者配置缺失导致的，咱们一步步来解决：

1. 最常见原因：未导入 Firebase Messaging 模块 #

Firebase 的核心包 firebase/app 只包含基础初始化能力，Messaging 是单独的功能模块，你需要手动导入它：

• 首先确保安装了对应的包（如果还没装的话）：

  npm install firebase @angular/fire
  # 用 yarn 的话就是
  yarn add firebase @angular/fire
  

• 然后修改你的服务代码，补上 Messaging 的导入：

  import { Injectable } from '@angular/core';
  import { AngularFireDatabase } from '@angular/fire/database';
  import { AngularFireAuth} from '@angular/fire/auth';
  import { AngularFireMessaging } from '@angular/fire/messaging'; // 新增AngularFire的Messaging服务
  import * as firebase from 'firebase/app';
  import 'firebase/messaging'; // 导入原生Firebase Messaging模块
  import 'rxjs/add/operator/take';
  import { BehaviorSubject} from 'rxjs/BehaviorSubject';
  
  @Injectable()
  export class MessagingService {
    messaging: firebase.messaging.Messaging;
  
    constructor(private afMessaging: AngularFireMessaging) {
      // 现在可以正常调用firebase.messaging()了
      this.messaging = firebase.messaging();
    }
  
    currentMessage = new BehaviorSubject(null);
    // 你的其他业务代码...
  }
  

2. 版本不兼容问题 #

如果你的 angularfire2（现在已经更名为 @angular/fire）和 firebase 版本不匹配，也会出现这类方法找不到的错误：

• 先检查当前安装的版本：

  npm list firebase @angular/fire
  

• 建议升级到兼容的版本，比如 AngularFire 7.x 对应 Firebase 9.x，如果你还在使用旧版的 angularfire2，建议迁移到 @angular/fire，官方已经停止维护旧包了。

3. Firebase 初始化配置缺失关键参数 #

确保你的 Firebase 配置里包含 messagingSenderId，这个是 Messaging 功能必须的参数，在 environment.ts 里：

export const environment = {
  production: false,
  firebase: {
    apiKey: "你的API密钥",
    authDomain: "你的Auth域名",
    databaseURL: "你的数据库URL",
    projectId: "你的项目ID",
    storageBucket: "你的存储桶",
    messagingSenderId: "你的消息发送者ID", // 这个不能漏！
    appId: "你的AppID"
  }
};

4. 浏览器环境或控制台配置问题 #

• 确保你的网站运行在 HTTPS 环境下（localhost 开发环境除外，Firebase 允许本地开发用 HTTP）
• 检查 Firebase 控制台是否已经为你的 Web 应用配置了 Messaging 服务，并且上传了 firebase-messaging-sw.js 服务工作者文件（如果需要后台消息推送的话）

额外提示：如果用 Firebase 9+ 模块化 API #

如果你的项目已经升级到 Firebase 9+ 的模块化写法，那调用方式会不一样，比如：

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging";

const app = initializeApp(environment.firebase);
const messaging = getMessaging(app);

不过从你的代码来看应该是用的旧版命名空间方式，所以优先按前面的步骤排查。

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