Best practice to init firebase #613

bzaruk · 2018-01-21T22:45:17Z

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 :)

The text was updated successfully, but these errors were encountered:

ShawnPavel · 2018-01-23T15:30:22Z

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.
#612
#593
#588
#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 · 2018-01-23T17:14:59Z

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

EddyVerbruggen · 2018-01-23T19:00:43Z

@ShawnPavel I've moved my init code to app.components.ts and still see this log message after startup:

nativescript-plugin-firebase/demo-ng/app/app.component.ts

Line 15 in f07762d

console.log("Firebase initialized");

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

ShawnPavel · 2018-01-23T19:15:25Z

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

EddyVerbruggen · 2018-01-23T19:18:39Z

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

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

ShawnPavel · 2018-01-23T19:20:46Z

I'll try one first.

EddyVerbruggen · 2018-01-23T19:22:09Z

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

ShawnPavel · 2018-01-23T19:23:54Z

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

ShawnPavel · 2018-01-23T19:33:49Z

@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 · 2018-01-23T19:36:10Z

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

ShawnPavel · 2018-01-23T20:39:15Z

@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 · 2018-01-23T20:44:01Z

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:

nativescript-plugin-firebase/src/firebase.android.ts

Line 353 in f07762d

if (appModule.android.foregroundActivity) {

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 · 2018-03-10T22:09:41Z

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

bzaruk · 2018-03-10T22:12:48Z

@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 · 2018-03-10T22:17:39Z

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

bzaruk · 2018-03-10T22:18:34Z

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

eleventhaus · 2018-03-10T22:19:59Z

Same as original error :S

I appreciate the help!! Any other ideas?

rahultyagiji · 2018-03-10T22:32:36Z

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 · 2018-03-10T22:56:09Z

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

rafaelcmrj · 2018-04-21T22:32:52Z

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

reytum · 2018-05-22T09:08:13Z

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 · 2019-04-24T18:44:51Z

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?

EddyVerbruggen added a commit that referenced this issue Jan 23, 2018

Best practice to init firebase #613

2de44ab

EddyVerbruggen added a commit that referenced this issue Jan 23, 2018

Best practice to init firebase #613

f07762d

EddyVerbruggen added a commit that referenced this issue Jan 23, 2018

Best practice to init firebase #613

0508c03

EddyVerbruggen added this to the 5.1.0 milestone Jan 23, 2018

EddyVerbruggen added bug Android labels Jan 23, 2018

EddyVerbruggen closed this as completed Jan 23, 2018

EddyVerbruggen modified the milestones: 5.1.0, 5.1.4 Jan 23, 2018

janossuta mentioned this issue Aug 11, 2018

angular firebase init issue on Android - "Run init() first!" #845

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Best practice to init firebase #613

Best practice to init firebase #613

bzaruk commented Jan 21, 2018 •

edited

Loading

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018 •

edited

Loading

EddyVerbruggen commented Jan 23, 2018

eleventhaus commented Mar 10, 2018

bzaruk commented Mar 10, 2018

eleventhaus commented Mar 10, 2018

bzaruk commented Mar 10, 2018

eleventhaus commented Mar 10, 2018

rahultyagiji commented Mar 10, 2018

eleventhaus commented Mar 10, 2018

rafaelcmrj commented Apr 21, 2018

reytum commented May 22, 2018

rafaelcmrj commented Apr 24, 2019

Best practice to init firebase #613

Best practice to init firebase #613

Comments

bzaruk commented Jan 21, 2018 • edited Loading

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018

EddyVerbruggen commented Jan 23, 2018

ShawnPavel commented Jan 23, 2018 • edited Loading

EddyVerbruggen commented Jan 23, 2018

eleventhaus commented Mar 10, 2018

bzaruk commented Mar 10, 2018

eleventhaus commented Mar 10, 2018

bzaruk commented Mar 10, 2018

eleventhaus commented Mar 10, 2018

rahultyagiji commented Mar 10, 2018

eleventhaus commented Mar 10, 2018

rafaelcmrj commented Apr 21, 2018

reytum commented May 22, 2018

rafaelcmrj commented Apr 24, 2019

bzaruk commented Jan 21, 2018 •

edited

Loading

ShawnPavel commented Jan 23, 2018 •

edited

Loading