Nativescript-plugin-firebase: Best practice to init firebase

[shabib3]

Hi guys,

I am trying to get what is the right way to init firebase (I am working on Angular project).

In the beginning I've put the firebase.init() in the main.ts but after I started to work on IOS I didn't received a background messaging on IOS so the thing that did the work for me was or to put the firebase.init() on 1000ms timeout on main.ts or to put it on the first page that I route to.

The thing is that I want to make the user login as he open the app, like this:

firebase.getAuthToken({ forceRefresh: false }).then(token => {
    if (!token) {
        return;
    }
    this._loginUtils.loginFromToken(token);
}, err => {
    firebase.logout();
    console.log("There is no token saved in the device");
});

Now, the thing is that the setTimeout solution is an ugly solution, but it works just fine, but when I implements the "prettier" solution of putting the init function on the first page ngOnInit function the init function never resolved, and I'll explain:
This is the "prettier" solution (exactly as @EddyVerbruggen wrote in the demo):

ngOnInit(): void {
    firebase.init({
        onAuthStateChanged: function (data) { // optional but useful to immediately re-logon the user when he re-visits your app
            console.log(data.loggedIn ? "Logged in to firebase" : "Logged out from firebase");
            if (data.loggedIn) {
                console.log("user's email address: " + (data.user.email ? data.user.email : "N/A"));
            }
            }
    }).then(() => {
        firebase.getAuthToken({ forceRefresh: false }).then(token => {
            if (!token) {
                return;
            }
            this._loginUtils.loginFromToken(token);
        }, err => {
            firebase.logout();
            console.log("There is no token saved in the device");
        });
    })
}

The buggy issue here is that the init function never resolved.

After debug the actual code of init function in firebase module in those two situation I found out that the following:

• when putting the init inside the first component in looks like it gets to this line appModule.on(appModule.launchEvent, runInit); but it seems like the appModule.launchEvent never raise or already raised, so the firebase init never happen and it is never resolved, so the use cannot automatically login into the app.

• when putting it in the main.ts with setTimeout it looks like it gets to this line runInit(); and all works just fine but this is a very ugly and bad performance solution.

PLS!
What is the right way to init the firebase?

Thanks a lot :)

[ShawnPavel]

I have been using this plugin for well over a year now in an angular app. And I have always called the firebase.init function in the ngOnInit method within the app.component. It has always worked flawlessly. However since I upgraded to NativeScript 3.4, Angular 5, and plugin v5.1.3 I have been encountering the same issues you have.

Primarily the init function never resolves and any calls to firebase after that result in a run init first error.

It seems there are a few others having similar issues with running init first.
https://github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/612
https://github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/593
https://github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/588
https://github.com/EddyVerbruggen/nativescript-plugin-firebase/issues/585

It seems the consensus so far is the use the timeout method.
@EddyVerbruggen Is there anything we can do to help figure out why we need that timeout now?

[EddyVerbruggen]

Updating the embedded demo-ng app to 5.2.0 and will see what ngOnInit in app.component does.

[EddyVerbruggen]

@ShawnPavel I've moved my init code to app.components.ts and still see this log message after startup: https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/f07762ddea6d0760f2e55ce2703ad652cf74bf4c/demo-ng/app/app.component.ts#L15

Perhaps your init is different, so can you replace yours with mine and see if we can narrow this down?

[ShawnPavel]

@EddyVerbruggen I dropped in your init directly replacing mine, and the "Firebase Initialized" is never printed.

[EddyVerbruggen]

Interesting.. at this point we can do one of 2 things:

1. You git clone https://github.com/EddyVerbruggen/nativescript-plugin-firebase, cd nativescript-plugin-firebase/src, and npm run demo-ng.ios
2. You give me instructions how to run your project :)

[ShawnPavel]

I'll try one first.

[EddyVerbruggen]

OK, if that works we'll need to dig into your project I'm afraid.

[ShawnPavel]

I will say, that I've done all this testing to this point on Android.

[ShawnPavel]

@EddyVerbruggen I can confirm that your initialization as well as my old initialization code work fine on iOS. So this appears to be an Android related issue.

[EddyVerbruggen]

Oww, the OP mentioned iOS so I focused on that. I'll take a look at Android.

[ShawnPavel]

@EddyVerbruggen I attempted to run the android demo but I get an error:

Could not merge source set folders: 
[app/tns_modules/long/dist/long.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/long/dist/long.min.js       [app/tns_modules/long/dist/long.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/long/dist/long.min.js.gz: Error: Duplicate resources

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeF0DebugAssets'.
> [app/tns_modules/long/dist/long.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/long/dist/long.min.js     [app/tns_modules/long/dist/long.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/long/dist/long.min.js.gz: Error: Duplicate resources
  [app/tns_modules/protobufjs/dist/protobuf.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf.min.js.gz      [app/tns_modules/protobufjs/dist/protobuf.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf.min.js: Error: Duplicate resources
  [app/tns_modules/protobufjs/dist/protobuf-light.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf-light.min.js.gz  [app/tns_modules/protobufjs/dist/protobuf-light.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf-light.min.js: Error: Duplicate resources
  [app/tns_modules/bytebuffer/dist/bytebuffer.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer.min.js.gz  [app/tns_modules/bytebuffer/dist/bytebuffer.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer.min.js: Error: Duplicate resources
  [app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js.gz        [app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js] /Users/shawnpavel/Development/other/test/nativescript-plugin-firebase/demo-ng/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js: Error: Duplicate resources

[EddyVerbruggen]

Yeah got that one as well and fixed it locally.

Better yet I found the culprit with NativeScript 3.4 and this plugin on Android:
https://github.com/EddyVerbruggen/nativescript-plugin-firebase/blob/f07762ddea6d0760f2e55ce2703ad652cf74bf4c/src/firebase.android.ts#L353

The foregroundActivity used to be defined in NativeScript < 3.4 when your OnInit function runs, but that's no longer the case. This fact also bit me in 3 other plugins unfortunately and I didn't realise this one was affected as well.

Fix inbound!

[eleventhaus]

Getting this error on NS 3.4.1 // Firebase plugin 5.1.8

I have firebase require in main.ts and call firebase init in app.cmp OnInit but keep getting the duplicate resource error from protobufs. What am I missing?

Main.ts

import { platformNativeScriptDynamic } from "nativescript-angular/platform";

import { AppModule } from "./app.module";

require("nativescript-plugin-firebase");

platformNativeScriptDynamic().bootstrapModule(AppModule);

app.component.ts

import { Component, OnInit } from "@angular/core";

import { firebase } from 'nativescript-plugin-firebase/firebase-common';
import { AuthService } from '@sunnypets/core';

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html"
})
export class AppComponent implements OnInit {

    constructor(private _as: AuthService) { }

    ngOnInit() {
        firebase.init({
            //persist should be set to false as otherwise numbers aren't returned during livesync
            persist: false,
            storageBucket: 'gs://sunny-pets-184721.appspot.com',
            onAuthStateChanged: (data: any) => {
                console.log(JSON.stringify(data));
                if (data.loggedIn) {
                    AuthService.uid = data.user.uid;
                }
            }
        }).then(
            function (instance) {
                console.log("firebase.init done");
            },
            function (error) {
                console.log("firebase.init error: " + error);
            }
        );
    }

}

Error:

* What went wrong:
Execution failed for task ':app:mergeF0F1DebugAssets'.
> [app/tns_modules/protobufjs/dist/protobuf-light.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf-light.min.js.gz  [app/tns_modules/protobufjs/dist/protobuf-light.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf-light.min.js: Error: Duplicate resources
  [app/tns_modules/bytebuffer/dist/bytebuffer.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer.min.js.gz  [app/tns_modules/bytebuffer/dist/bytebuffer.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer.min.js: Error: Duplicate resources
  [app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js.gz        [app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/bytebuffer/dist/bytebuffer-dataview.min.js: Error: Duplicate resources
  [app/tns_modules/long/dist/long.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/long/dist/long.min.js     [app/tns_modules/long/dist/long.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/long/dist/long.min.js.gz: Error: Duplicate resources
  [app/tns_modules/protobufjs/dist/protobuf.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf.min.js.gz      [app/tns_modules/protobufjs/dist/protobuf.min.js] /Users/volaticus/Dev/tns/sunnypetstns/platforms/android/app/src/main/assets/app/tns_modules/protobufjs/dist/protobuf.min.js: Error: Duplicate resources

gist

[shabib3]

@eleventhaus - try to import firebase like this import { firebase } from 'nativescript-plugin-firebase'; instead of import { firebase } from 'nativescript-plugin-firebase/firebase-common'; in the AppComponent

[eleventhaus]

My ide throws an error for no exported member when using import { firebase } from 'nativescript-plugin-firebase';

app/app.component.ts(3,10): error TS2305: Module '"/Users/volaticus/Dev/tns/sunnypetstns/node_modules/nativescript-plugin-firebase/index"' has no exported member 'firebase'.

Also tried use const = require('nativescript-plugin-firebase'); but got same duplicate resources error as before

[shabib3]

@eleventhaus - try this - import * as firebase from "nativescript-plugin-firebase";

[eleventhaus]

Same as original error :S

I appreciate the help!! Any other ideas?

[rahultyagiji]

I have used,
import {firebase} from "nativescript-plugin-firebase/firebase-common" in appcomponent.
that worked for me. But mine is 3.4.0 and 5.1.7...

[eleventhaus]

tried downgrading to 3.4.0/5.1.7 and tried each of the different imports with no luck

[rafaelcmrj]

same error here, tried all different versions... any update on this?

[reytum]

Same error here but in different plugin, its gives duplicate resource error for semver.min.js and semver.min.js.gz. Any help on this would be appreciated.

[rafaelcmrj]

I'm still getting this error when I update any HTML/sass file. Do we have the right way to init the app in the documentation?