问题

I've managed to get @angular/fire working in an Angular standalone app, but I'm attempting to turn on the offline capabilities like I have in the past, and I'm now seeing that enableIndexedDbPersistence has been marked as deprecated. It suggests the following:

这是我已经在一个独立的Angular应用中成功使用@angular/fire，但我正在尝试像过去一样启用离线功能，现在我看到enableIndexedDbPersistence已被标记为已弃用。它建议如下：

This function will be removed in a future major release. Instead, set FirestoreSettings.cache to an instance of IndexedDbLocalCache to turn on IndexedDb cache. Calling this function when FirestoreSettings.cache is already specified will throw an exception.

这个函数将在未来的主要版本中被移除。而是将FirestoreSettings.cache设置为IndexedDbLocalCache的实例，以启用IndexedDb缓存。如果已经指定了FirestoreSettings.cache，则调用此函数将引发异常。

I've gone to the documentation that usually translates very well to how @angular/fire is used (https://firebase.google.com/docs/firestore/manage-data/enable-offline), but I don't see any obvious direction on what to do. The docs show the use of an options argument being passed into the call to initializeFirestore, but Angular apps don't seem to use this method externally (from the developer's perspective).

我已经查看了通常很好地解释了@angular/fire的使用方式的文档（https://firebase.google.com/docs/firestore/manage-data/enable-offline），但我没有看到明显的指导方向。文档显示了将选项参数传递给initializeFirestore调用，但从开发者的角度来看，Angular应用程序似乎不会外部使用这种方法。

What I currently have is the following:

我目前拥有以下内容：

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000',
    }),
    importProvidersFrom(
      provideFirebaseApp(() =>
        initializeApp({
          // ... my info
        })
      ),
      provideAuth(() => getAuth()),
      provideFirestore(() => {
        const firestore = getFirestore();
        enableIndexedDbPersistence(firestore); // Marked as deprecated :(
        return firestore;
      }),
      provideStorage(() => getStorage())
    ),
  ],
};

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

Let me know if you need further assistance with this code.如果您需要进一步帮助处理此代码，请告诉我。

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    provideServiceWorker('ngsw-worker.js', {
      enabled: !isDevMode(),
      registrationStrategy: 'registerWhenStable:30000',
    }),
    importProvidersFrom(
      provideFirebaseApp(() => 
        initializeApp({
          // ... my info
        })
      ),
      provideAuth(() => getAuth()),
      provideFirestore(() => {
        const firestore = getFirestore();
        enableIndexedDbPersistence(firestore); // Marked as deprecated :(
        return firestore;
      }),
      provideStorage(() => getStorage())
    ),
  ],
};

答案1

得分: 4

I figured this out, finally, just before submitting my question. 我最终弄清楚了，就在提交问题之前。

I took a closer look at how the provideFirebaseApp factory function provided the app, and it was calling initializeApp. 我仔细查看了provideFirebaseApp工厂函数提供应用程序的方式，它调用了initializeApp。

So for the provideFirestore factory function, I figured maybe I COULD actually follow the documentation mentioned in my question if instead of using getFirestore(), I use the initializeFirestore(...) method, both of which return an instance of Firestore. 因此，对于provideFirestore工厂函数，我想也许我可以实际按照我问题中提到的文档，而不是使用getFirestore()，我可以使用initializeFirestore(...)方法，这两者都会返回一个Firestore实例。

Works like a charm if you do the following: 如果您按照以下方式操作，效果非常好：

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    importProvidersFrom(
      ...
      provideFirestore(() => 
        initializeFirestore(getApp(), {
          localCache: persistentLocalCache({
            tabManager: persistentMultipleTabManager(),
          }),
        })
      ),
      ...
    ),
  ],
};
}

export const appConfig: ApplicationConfig = {
  providers: [
    ...
    importProvidersFrom(
      ...
      provideFirestore(() => 
        initializeFirestore(getApp(), {
          localCache: persistentLocalCache({
            tabManager: persistentMultipleTabManager(),
          }),
        })
      ),
      ...
    ),
  ],
};
}