Ionic-framework: RC4: Firebase not defined

[beta3designs]

Ionic version:
2.x

I'm submitting a ...
bug report

So, I have a project using AngularFire2 and Firebase, which was working like a charm with RC3.
I'm using AngularFire2 whenever possible, and using the Firebase JS SDK where needed, simply by using firebase. But when updating to RC4 I think I might have found a bug.

I've created a fresh project almost from scratch to reproduce the error see steps to reproduce below.

Current behavior
If using RC4, console.log('FB?', JSON.stringify(firebase.auth(), null, 2)) throws the following error:
firebase is not defined

Expected behavior:
When using RC3 however, everything works fine and the same line outputs the following in the console:

FB? {
  "apiKey": "<my-api-key>",
  "authDomain": "rc4af2.firebaseapp.com",
  "appName": "[DEFAULT]",
  "currentUser": null
}

Steps to reproduce
I decided to create a fresh project to reproduce the error. You can get it by cloning the repository:
git clone https://gitlab.com/beta3designs/rc4af2.git
And then once inside the corresponding folder, running the usual:
npm install.

If you want to test RC3 just run:
git checkout rc3
And once again npm install

Other information:
I created the firebase project on purpose for this issue so the API Key is already setup and everything but please don't abuse it and bear in mind that I will delete as soon as I get this fixed and running.

I have also tried using import firebase from 'firebase'; and import * as firebase from 'firebase';, which was not necessary with RC3 but I get the following error while compiling:
Cannot call method indexOf of undefined

I'm running Ubuntu 16.04 and ionic info displays the following:
Ionic info:

    Cordova CLI: 6.4.0 
    Ionic CLI Version: 2.1.17
    Ionic App Lib Version: 2.1.7
    ios-deploy version: Not installed
    ios-sim version: Not installed
    OS: Linux 4.4
    Node Version: v6.9.1
    Xcode version: Not installed

Any help is appreciated,
Thank you in advance!

[numerized]

I have encountered exactly the same issue, with the exact same ways of bypassing the problem with import and the error with indexOf

[appdezign]

same issue, same workaround, same error with indexOf

[antoine92190]

The problem comes from ionic/app-scripts.
With "0.0.45" version, everything works fine.
With "0.0.46" and "0.0.47", it is necessary to import firebase as you mentioned above.

To fix the indexOf error, you can delete the "firebase" folder in node_modules/angularfire2/node_modules/firebase

After doing that, the app is building without any error, but the firebase real-time data is not correctly updating. Actually, I am facing the exact same issue as mentioned here:
https://forum.ionicframework.com/t/ionic2-with-real-time-data-not-updating-firebase/47189/32

I haven't found any solution yet, so I will keep using app-scripts version "0.0.45" for now.

I hope this can be fixed soon or someone can find a real solution for that!

[tja4472]

@beta3designs
Hi

try

import { Component, Inject } from '@angular/core';

import { NavController } from 'ionic-angular';

import { AngularFire, FirebaseApp } from 'angularfire2';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    @Inject(FirebaseApp) private firebaseApp: any,
    private navCtrl: NavController,
    private af: AngularFire
  ) { }

  ionViewDidEnter() {
    console.log('AF2?', JSON.stringify(this.af.auth, null, 2));
    console.log('FB?', JSON.stringify(this.firebaseApp.auth(), null, 2));
  }

}

see
https://stackoverflow.com/questions/39067832/accessing-firebase-storage-with-angularfire2-angular2-rc-5/39069813#39069813

and

    /*
         @Inject(FirebaseApp) firebaseApp: firebase.app.App,
         gives error with ngc.
         ionic build android
         https://github.com/angular/angular/issues/12631
    */

hth
Tim

[javebratt]

Hey @antoine92190 have you tried removing the Firebase install instead of the one that comes inside AngularFire2?

[beta3designs]

Hi there @tja4472
Such a clean solution, it did work for me!
I really tried searching for similar issues in StackOverflow and github but, apparently, I didn't do it well enough...

Thank you very much!

P.S. I'll be updating the master branch to reflect the changes, moving the old code to an old branch and removing the API keys, in case anyone still wants to use the repo for reference.

UPDATE: It did work for that simple example, but it didn't when trying to use it in more complex statements like for example:
firebase.auth.FacebookAuthProvider.credential(resp.authResponse.accessToken)
where the error cannot read property credential of undefined is thrown... @javebratt 's solution seems to work better for me :)

[magicfa]

I deleted the extra firebase from node_modules and out also delete the line for firebase in package.json and it worked fine

[antoine92190]

@javebratt
I strangely did not think about that, but it works very well. Thanks!

[kleeb]

if you are using rollup upgrade angularfire2 to 2.0.0-beta.6 and follow these instructions:
https://github.com/angular/angularfire2/blob/master/docs/aot-rollup-cli-setup.md

however I don't think your problems are strictly connected to ionic project

[jgw96]

Thanks @javebratt for helping with this issue!

[xap5xap]

Thank you @javebratt. It worked for me.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.