AngularFire2 error "ReferenceError: firebase is not defined"

Question

I'm trying to create a user with email/password using AngularFire2

this is the code that is throwing the error when i click the submit button in my signup component:

firebase.auth().createUserWithEmailAndPassword(this.signupForm.value.email, this.signupForm.value.password).catch(function(error) {
  alert(error.message);
});

versions from package.json:

angular: "^2.3.1",
"angularfire2": "^2.0.0-beta.7",
"firebase": "^3.6.6"

I've been having trouble implementing email/pass auth with angularfire2 from the start, and I've searched for over an hour and a half looking for answers to this problem (among others, there doesn't seem to be a whole lot of info/support for angularfire2 yet?)

please help! I'm still learning, and this truly has me stumped.

here is the full error in the console:

vendor.bundle.js:46373 ReferenceError: firebase is not defined
at SignupComponent.webpackJsonp.806.SignupComponent.signup        (http://localhost:4200/main.bundle.js:601:9)
at CompiledTemplate.proxyViewClass.View_SignupComponent0.handleEvent_0 (/AppModule/SignupComponent/component.ngfactory.js:152:34)
at CompiledTemplate.proxyViewClass.<anonymous> (http://localhost:4200/vendor.bundle.js:65473:37)
at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/vendor.bundle.js:79924:36)
at SafeSubscriber.__tryOrUnsub (http://localhost:4200/vendor.bundle.js:52413:16)
at SafeSubscriber.next  (http://localhost:4200/vendor.bundle.js:52362:22)
at Subscriber._next (http://localhost:4200/vendor.bundle.js:52315:26)
at Subscriber.next (http://localhost:4200/vendor.bundle.js:52279:18)
at EventEmitter.Subject.next (http://localhost:4200/vendor.bundle.js:52079:25)
at EventEmitter.emit (http://localhost:4200/vendor.bundle.js:79898:76)
at FormGroupDirective.onSubmit (http://localhost:4200/vendor.bundle.js:81620:23)
at Wrapper_FormGroupDirective.handleEvent (/ReactiveFormsModule/FormGroupDirective/wrapper.ngfactory.js:42:34)
at CompiledTemplate.proxyViewClass.View_SignupComponent0.handleEvent_0 (/AppModule/SignupComponent/component.ngfactory.js:150:42)
at CompiledTemplate.proxyViewClass.<anonymous> (http://localhost:4200/vendor.bundle.js:65473:37)
at HTMLFormElement.<anonymous> (http://localhost:4200/vendor.bundle.js:34579:53)

Please post also the error you get.

Jan Franta
– Jan Franta

2017-01-24 23:35:11 +00:00
Commented Jan 24, 2017 at 23:35 — Jan Franta
– Jan Franta, Commented Jan 24, 2017 at 23:35

Jacob Hixon · Accepted Answer · 2017-01-25 04:29:12Z

So, what turned out to be the problem was as follows:

I ended up revising this block of code:

firebase.auth().createUserWithEmailAndPassword(this.signupForm.value.email, this.signupForm.value.password).catch(function(error) {                    
  alert(error.message);
});

to this:

this.af.auth.createUser(this.signupForm.value).catch(function(error) {
  alert(error.message);
});

the problem was in the fact that i was calling upon the wrong object, firebase, when I should have been calling upon this.af.auth as i had defined public af: AngularFire in my constructor.

there was also another error, and that was the fact that i was calling the wrong method on the angularfire2 module:

I used

.createUserWithEmailAndPassword(email: email, password: password)

when i should've been using

.createUser({email, password})

fixing these two issues made the application work as expected with no errors.

@sugarme was the correct answer I just happened to come to the same conclusion right before i left school so i did not have time to post this answer until now.

Thanks all!

PS Here is my full signup.component for reference:

import { Component, OnInit } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { FormBuilder } from '@angular/forms';
import { Router } from '@angular/router';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.scss']
})
export class SignupComponent {

  public signupForm = this.fb.group({
    email: [""],
    password: [""]
  });
  constructor(private router: Router, public fb: FormBuilder, public af: AngularFire) {}
  signup() {
    console.log(this.signupForm.value);
    this.af.auth.createUser(this.signupForm.value).catch(function(error) {
      alert(error.message);
    });
    this.router.navigate(['store'])
  }
}

sugarme · Accepted Answer · 2017-01-25 03:21:43Z

1

You can use AngulareFire to create user with email/password something likes:

import { Component } from '@angular/core';
import { AngularFire, AuthProviders, AuthMethods, AngularFireModule } from 'angularfire2';
@Component({
        ...
    })
export class MyApp {
    constructor(af: AngularFire) {
    this.af.auth.createUser({ email: email, password: password})
        .then ((user) => {
            console.log(user);
        })
        .catch((error) => {        
            console.log(error);
            });

    }
}

If you want to use firebase, then try to declare variable firebase right below your import section: var firebase = require("firebase"); // <-- Declare firebase variable here

It is in my working component. Let's me know about the result.

edited Jan 25, 2017 at 3:21

answered Jan 25, 2017 at 2:42

sugarme

7615 silver badges9 bronze badges

1 Comment

Jacob Hixon Over a year ago

yes, I've added an answer that explains how i got it to work and what the problem ended up being

Jan Franta · Accepted Answer · 2017-01-24 23:48:05Z

0

Did you install firebase?

npm install firebase --save

I know it's a dependency of angularfire2 package. But your script did not find it.

May you have an know and solved issue: https://github.com/angular/angularfire2/issues/520

answered Jan 24, 2017 at 23:48

Jan Franta

1,7192 gold badges16 silver badges26 bronze badges

1 Comment

Jacob Hixon Over a year ago

1. yes i have firebase installed, i just reinstalled just to triple check, same error. 2. I have already looked at that issue and it did not solve mine. 3. Google auth with firebase worked just fine earlier, using the command af.auth.login(); but you do not use the firebase global for that command

Lord von · Accepted Answer · 2018-05-22 23:53:18Z

0

properly you missed to import firebase into the page

import { FirebaseProvider } from '../../providers/firebase/firebase';
import firebase from 'firebase';

answered May 22, 2018 at 23:53

Lord von

1

Collectives™ on Stack Overflow

AngularFire2 error "ReferenceError: firebase is not defined"

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related