如何在app.module.ts初始化Firestore时禁用持久化（iOS适配）

针对你遇到的Firestore持久化bug，在Angular项目中使用AngularFire时，我们可以通过APP_INITIALIZER来确保禁用持久化的代码在所有Firestore操作之前执行，下面是具体步骤：

1. 所需导入 #

首先在你的app.module.ts中导入必要的模块和服务：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule, AngularFirestore } from '@angular/fire/compat/firestore';
import { environment } from '../environments/environment'; // 你的Firebase配置文件

2. 创建初始化函数 #

编写一个函数来检测iOS设备并设置Firestore的持久化选项：

// 初始化Firestore设置的函数
export function initializeFirestoreSettings(firestore: AngularFirestore) {
  return () => {
    // 仅针对iOS设备禁用持久化
    if (typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent)) {
      // 获取底层Firestore实例并设置持久化禁用
      firestore.firestore.settings({ persistence: false });
    }
  };
}

3. 配置APP_INITIALIZER #

在模块的providers数组中注册这个初始化函数，确保它在应用启动时优先执行：

@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase), // 你的Firebase初始化
    AngularFirestoreModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeFirestoreSettings,
      deps: [AngularFirestore],
      multi: true // 允许多个初始化函数
    }
  ],
  // ...其他模块配置
})
export class AppModule { }

为什么选择APP_INITIALIZER？ #

APP_INITIALIZER是Angular提供的初始化钩子，它会在应用启动阶段、任何组件或服务初始化之前执行代码，完美满足你“在其他Firestore调用前执行”的要求。相比在组件的ngOnInit中执行，这种方式更可靠，能避免因组件加载顺序导致的Firestore操作提前执行的问题。

另外要注意：firestore.firestore是获取AngularFirestore封装的底层原生Firestore实例，只有通过这个实例才能调用settings()方法修改持久化配置。

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