Angularfire: enablePersistence() does not work with Angular SSR

Created on 22 Jun 2018  路  6Comments  路  Source: angular/angularfire

Version info

Angular:
6.0.3

Firebase:
5.1.0

AngularFire:
5.0.0-rc.9

Other (e.g. Ionic/Cordova, Node, browser, operating system):
OS: macOS High Sierra 10.13.5
Node Version: 8.9.0

Steps to set up and reproduce
In app.module.ts,
import: AngularFireModule.initializeApp(environment.firebase),
and AngularFirestoreModule.enablePersistence(),

In app.component.ts, add a reference to firestore.
In another route, add a reference to firestore.
Implement SSR with both routes.

Debug output

* Errors in the JavaScript console *

Error enabling offline storage. Falling back to storage disabled: FirebaseError: [code=unimplemented]: This platform is either missing IndexedDB or is known to have an incomplete implementation. Offline persistence has been disabled.

ERROR { FirebaseError: Firestore has already been started and persistence can no longer be enabled. You can only call enablePersistence() before calling any other methods on a Firestore object.
    at new FirestoreError (webpack:///./node_modules/@firebase/firestore/dist/index.esm.js?:347:28)
    at Firestore.enablePersistence (webpack:///./node_modules/@firebase/firestore/dist/index.esm.js?:16184:19)
    at eval (webpack:///./node_modules/angularfire2/firestore/firestore.js?:39:112)
    at ZoneDelegate.invoke (webpack:///./node_modules/zone.js/dist/zone-node.js?:387:26)
    at Zone.run (webpack:///./node_modules/zone.js/dist/zone-node.js?:137:43)
    at NgZone.runOutsideAngular (webpack:///./node_modules/@angular/core/fesm5/core.js?:4293:28)
    at new AngularFirestore (webpack:///./node_modules/angularfire2/firestore/firestore.js?:38:41)
    at _createClass (webpack:///./node_modules/@angular/core/fesm5/core.js?:9544:20)
    at _createProviderInstance$1 (webpack:///./node_modules/@angular/core/fesm5/core.js?:9506:26)
    at resolveNgModuleDep (webpack:///./node_modules/@angular/core/fesm5/core.js?:9472:21)
  code: 'failed-precondition',
  name: 'FirebaseError',
  toString: [Function] }

Expected behavior

Ideally should not produce this error and should have a check of whether or not AngularFirestore is being run in the browser on the server to determine whether or not to enablePersistence().
Update Line 22 in firestore.ts to include:
I.e. something like:

if (isPlatformBrowser(platformId)) {
  this.persistenceEnabled$ = zone.runOutsideAngular(() =>
        shouldEnablePersistence ? from(this.firestore.enablePersistence().then(() => true, () => false))
                                : of(false)
      )
      .pipe(
        catchError(() => of(false))
      ); // https://github.com/firebase/firebase-js-sdk/issues/608
} else {
 this.persistenceEnabled$ = of(false)
}

Actual behavior

Running into error during prerendering and rendering fails.

Most helpful comment

Hey @bfan1256 @joaqcid! @jamesdaniels is working on excluding this from the SSR builds. Stay tuned!

All 6 comments

@bfan1256 That fix would work, but it would introduce bytes on the client that belong on the server. The error indicates that Firestore calls begin before .enablePersistence(). I think we can fix it by ensuring .enablePersistence() is called before any Firestore methods on the server. I'll sync up with @jamesdaniels (who wrote 100% of the SSR code) to figure out what's going on.

Awesome thanks @davideast!

Any updates on a fix yet @davideast ?

Im getting a similar error with Hot Module Replacement enabled

Hey @bfan1256 @joaqcid! @jamesdaniels is working on excluding this from the SSR builds. Stay tuned!

Dealt w/in #1850

Was this page helpful?
0 / 5 - 0 ratings