如何通过AngularFire配置Firestore持久化及缓存大小并验证生效

配置有效性说明 #

你当前在AppModule构造函数中直接调用Firebase全局方法配置缓存的方式存在执行时序风险：Firestore要求settings()必须在首次访问Firestore实例前调用，若应用内有其他初始化逻辑（如根级服务、路由守卫等）先触发了Firestore读写，该配置会抛出异常且不生效。

最佳实现方案 #

推荐使用AngularFire官方提供的FIRESTORE_SETTINGS注入令牌配置缓存大小，从框架层面保证配置在Firestore实例初始化前注入，避免时序问题，完整配置示例如下：

import { NgModule } from '@angular/core';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule, FIRESTORE_SETTINGS } from '@angular/fire/compat/firestore';
import { firebaseConfig } from './firebase.config';
import firebase from 'firebase/compat/app';

@NgModule({
  imports: [
    AngularFireModule.initializeApp(firebaseConfig),
    // 配置持久化参数
    AngularFirestoreModule.enablePersistence({
      experimentalForceOwningTab: true,
      synchronizeTabs: true,
    })
  ],
  providers: [
    // 注入缓存大小配置
    {
      provide: FIRESTORE_SETTINGS,
      useValue: {
        cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED
      }
    }
  ]
})
export class AppModule { }

运行时查看缓存配置 #

你可以通过注入AngularFirestore实例直接读取当前生效的配置：

import { AngularFirestore } from '@angular/fire/compat/firestore';

constructor(private afs: AngularFirestore) {
  // 输出当前缓存大小配置：-1代表无限制，默认值为41943040（对应40MB）
  console.log('当前Firestore缓存大小：', this.afs.firestore.settings.cacheSizeBytes);
}

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