Skip to content

enablePersistence() does not work with Angular SSR #1744

@bfan1256

Description

@bfan1256

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions