Angular独立应用@angular/fire离线配置：enableIndexedDbPersistence弃用问题

在Angular独立应用中已成功配置@angular/fire，但开启Firestore离线功能时，发现enableIndexedDbPersistence()已被标记为弃用。官方提示该函数将在未来大版本移除，需设置FirestoreSettings.cache为IndexedDbLocalCache实例来启用IndexedDb缓存。查阅相关文档后未找到适配@angular/fire的明确方案，文档显示需在initializeFirestore中传入配置参数，但Angular开发视角下无需手动调用该方法。当前配置代码如下：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000',
    }),
    importProvidersFrom(
      provideFirebaseApp(() => 
        initializeApp({
          // ... 我的配置信息
        })
      ),
      provideAuth(() => getAuth()),
      provideFirestore(() => {
        const firestore = getFirestore();
        enableIndexedDbPersistence(firestore); // 已标记为弃用 :(
        return firestore;
      }),
      provideStorage(() => getStorage())
    ),
  ],
};

直接在provideFirestore的工厂函数中调用initializeFirestore并传入包含缓存配置的参数，替代原来getFirestore()搭配弃用方法的写法即可，具体步骤如下：

1. 导入所需的工具类：

import { initializeFirestore } from '@angular/fire/firestore';
import { IndexedDbLocalCache } from '@firebase/firestore';

2. 修改provideFirestore的配置逻辑：

provideFirestore(() => 
  initializeFirestore(getApp(), {
    cache: new IndexedDbLocalCache()
  })
),

修改后的完整appConfig代码如下：

import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideServiceWorker } from '@angular/service-worker';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideFirestore, initializeFirestore } from '@angular/fire/firestore';
import { provideStorage, getStorage } from '@angular/fire/storage';
import { IndexedDbLocalCache } from '@firebase/firestore';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000',
    }),
    importProvidersFrom(
      provideFirebaseApp(() => 
        initializeApp({
          // ... 我的配置信息
        })
      ),
      provideAuth(() => getAuth()),
      provideFirestore(() => 
        initializeFirestore(getApp(), {
          cache: new IndexedDbLocalCache()
        })
      ),
      provideStorage(() => getStorage())
    ),
  ],
};

该配置通过官方推荐的方式启用了Firestore的IndexedDb离线缓存，完美替代弃用的enableIndexedDbPersistence()方法。

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