How to get access to native Firebase object when using angularfire2?

Question

I'm using AngularFire2 (2.0.0-beta.2) incombination with angular2 (2.0.0-rc.4). I'd like to get access to the native firebase object (not the AngularFire root object) from Angularfire2.

Within my component, I want to make calls like:

firebase.auth().currentUser.updateEmail("[email protected]")

where firebase is the native firebase object, like that you get from the fragment below:

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
    var config = {
      apiKey: "apiKey",
      authDomain: "projectId.firebaseapp.com",
      databaseURL: "https://databaseName.firebaseio.com",
      storageBucket: "bucket.appspot.com",
    };
    firebase.initializeApp(config);
  </script>

But I don't understand how to setup my angular2 component so that the firebase object is visible within it. Probably a very simple problem to solve, but I don't know how to solve -- I'm not an angular2 expert. I was hoping there would be and AngularFire api to get the object, but there is not.

Also, the reason that I'm trying to do this is that I don't think the angularfire2 api's are complete yet (thats understandable as its still in beta) and I'm trying to work around this. For example I want to update the users email address or password, or send them the forgotten password email. None of this functionality seems to exist yet in AngularFire2, so I'm trying to implement using the native Firebase object.

Answer 1

If you're reading this in September 2016 onwards, this approach might sound good to you.

See the code for superior understanding:

import { Component, Inject } from '@angular/core';
import { AngularFire, FirebaseApp } from 'angularfire2';
    
@Component({
  templateUrl: 'app/auth/resetpassword.component.html'
})
    
export class ResetpassComponent {
  public auth: any;
  constructor(private af: AngularFire, @Inject(FirebaseApp) firebaseApp: any) {
    this.auth = firebaseApp.auth()
    console.log(this.auth);
  }
    
  // formData.value.email = '[email protected]';
  onSubmit(formData) {
     if(formData.valid) {
       console.log('Sending email verification');
       this.auth.sendPasswordResetEmail(formData.value.email)
         .then( (response) => {
           console.log('Sent successfully');
         })
         .catch( (error) => {
           console.log(error);
         })
     }
  }
}

In English:

• Import Inject and FirebaseApp
• Make available in your component
• Start using all the native javascript SDK functions and methods, such as sendPasswordResetEmail()

Doing a auth. doesn't autocomplete with the available methods and functions, so you might need the docs close to you, such as this: https://firebase.google.com/docs/auth/web/manage-users

Any thanks? Give to @cartant : https://stackoverflow.com/a/39069813/1757321

Answer 2

I'm going to try and answer my own question. Let me first say that I'm sure my answer is not the most elegant solution, I'm not yet a javascript/typescript/angular expert. But my answer does work -- even if I don't completely understand.

I used angular-cli to setup my project which is based on angular2 and the latest firebase. Apparently when you use this to setup your project there is a global object created with the name "firebase" in existence. One way to make it visible within your angular 2 component is to put this declaration at the global level in you component (right after the import statements and before your class declaration).

declare var firebase : any;

After you do this the global firebase object is available for use in your component.

Answer 3

RanchoSoftware's solution did not work for me, i used

import {AngularFireModule} from "angularfire2";
import *as firebase from 'firebase';

within the imports in the app.module.ts file

found here: https://github.com/angular/angularfire2/issues/445