[firebase-database] Calls to setPersistenceEnabled() must be made before any other usage of FirebaseDatabase instance

[kriefsacha]

Hi,

If you launch your app on debug, work on it, change something and save, the app gets reloaded, and then you get this:

Error: Uncaught (in promise): Error: com.google.firebase.database.DatabaseException: Calls to setPersistenceEnabled() must be made before any other usage of FirebaseDatabase instance.
JS: set persistenceEnabled(file: node_modules@nativescript\firebase-database\index.android.js:621:0)
JS: at (file: src\app\app.component.ts:36:20)
JS: at invoke(file: node_modules\zone.js\fesm2015\zone.js:372:0)
JS: at onInvoke(file: node_modules@angular\core\fesm2015\core.mjs:25548:0)
JS: at invoke(file: node_modules\zone.js\fesm2015\zone.js:371:0)
JS: at run(file: node_modules\zone.js\fesm2015\zone.js:134:0)
JS: at (file: node_modules\zone.js\fesm2015\zone.js:1275:0)
JS: at invokeTask(file: node_modules\zone.js\fesm2015\zone.js:406:0)
JS: at onInvokeTask(file: node_modules@angular\core\fesm2015\core.mjs:25535:0)
JS: at invokeTask(file:///data/data/org.n...

I think Eddy got this once.

app.component:

    firebase().initializeApp().then(
      () => {
        firebase().database().persistenceEnabled = true;
        firebase().crashlytics().setCrashlyticsCollectionEnabled(true);
        console.log("firebase.init done");
      },
      error => {
        console.log(`firebase.init error: ${error}`);
      }
    );

package.json

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~13.2.0",
    "@angular/common": "~13.2.0",
    "@angular/compiler": "~13.2.0",
    "@angular/core": "~13.2.0",
    "@angular/forms": "~13.2.0",
    "@angular/platform-browser": "~13.2.0",
    "@angular/platform-browser-dynamic": "~13.2.0",
    "@angular/router": "~13.2.0",
    "@nativescript-community/ui-pulltorefresh": "^2.5.1",
    "@nativescript/angular": "^13.0.0",
    "@nativescript/background-http": "~5.0.0",
    "@nativescript/camera": "^5.0.12",
    "@nativescript/core": "^8.2.3",
    "@nativescript/datetimepicker": "2.1.9",
    "@nativescript/firebase-core": "^2.0.2",
    "@nativescript/firebase-crashlytics": "^2.0.2",
    "@nativescript/firebase-database": "^2.0.2",
    "@nativescript/firebase-storage": "^2.0.2",
    "@nativescript/geolocation": "~8.0.0",
    "@nativescript/imagepicker": "~1.0.0",
    "@nativescript/mlkit-barcode-scanning": "^1.0.5",
    "@nativescript/mlkit-core": "^1.0.5",
    "@nativescript/mlkit-face-detection": "^1.0.5",
    "@nativescript/theme": "^3.0.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@nstudio/nativescript-camera-plus": "^4.1.0",
    "@nstudio/nativescript-loading-indicator": "~4.0.0",
    "@nstudio/nativescript-snackbar": "~2.0.0",
    "crypto-browserify": "^3.12.0",
    "latest": "^0.2.0",
    "nativescript-imagecropper": "~4.0.0",
    "nativescript-nfc": "~5.0.0",
    "nativescript-permissions": "^1.3.8",
    "nativescript-sound-kak": "^1.2.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-chart": "~9.0.0",
    "nativescript-ui-sidedrawer": "~10.0.0",
    "nativescript-webview-interface": "^1.4.2",
    "rxjs": "^7.4.0",
    "stream-browserify": "^3.0.0",
    "tns-platform-declarations": "^6.5.15",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.3.6",
    "@angular-eslint/builder": "13.0.1",
    "@angular-eslint/eslint-plugin": "13.0.1",
    "@angular-eslint/eslint-plugin-template": "13.0.1",
    "@angular-eslint/schematics": "13.0.1",
    "@angular-eslint/template-parser": "13.0.1",
    "@angular/compiler-cli": "~13.2.0",
    "@nativescript/android": "8.2.3",
    "@nativescript/ios": "8.2.3",
    "@nativescript/schematics": "^0.5.2",
    "@nativescript/types": "~8.2.0",
    "@nativescript/webpack": "~5.0.0",
    "@ngtools/webpack": "~13.2.0",
    "@types/jasmine": "^3.5.11",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^8.2.0",
    "typescript": "~4.5.5"
  },
  "readme": "NativeScript Application",
  "main": "./src/main.ts",
  "scripts": {
    "lint": "ng lint"
  }
}

Probably because the app.component is call again. It can probably occur also if you put the app on background and you come back. If you can help please.
Thanks for your help

[triniwiz]

What you can do is add a guard around firebase().initializeApp() in this instance it should only be called once. Also the initialize call should be in your main.ts

[kriefsacha]

@triniwiz by a guard you mean a try and catch ? Because i tried and i still have the same. I also moved it to main.ts and same thing

[triniwiz]

A property you can set/get to ensure it’s only set once per app launch

[kriefsacha]

You mean something like:

try {
  let initialized = false;
  if(initialized === false) {
    firebase().initializeApp().then(
    () => {
      firebase().database().persistenceEnabled = true;
      firebase().crashlytics().setCrashlyticsCollectionEnabled(true);
      initialized = true;
      console.log("firebase.init done");
    },
    error => {
      console.log(`firebase.init error: ${error}`);
    }
  );
  }
}
catch (err) {
  console.log("err in try and catch " + err);
}

because if yes it doesnt work

[danouche93]

I also have the same issue. Any solution?

[kriefsacha]

@triniwiz some news about this ?

[triniwiz]

Will try fixing soon