AngularFire2 ошибка «ReferenceError: firebase не определен»

Question

Я пытаюсь создать пользователя с электронной почтой/пароль, используя AngularFire2

это код, который бросает ошибку, когда я нажимаю кнопку отправки в моем SIGNUP компоненте :

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

версии от package.json:

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

у меня возникли проблемы реализации электронной почты/пасс авторизацию с angularfire2 с самого начала, и я искал п или более чем на полтора часа, ища ответы на эту проблему (среди прочего, похоже, что пока еще нет информации/поддержки для angularfire2?)

, пожалуйста, помогите! Я все еще учусь, и это действительно меня озадачило.

здесь полная ошибка в консоли:

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) 

Answer 1

Вы можете использовать AngulareFire для создания пользователя с электронным/паролем что-то любит:

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); 
      }); 

    } 
} 

Если вы хотите использовать firebase, а затем попытаться объявить переменную firebase прямо под вашей импортной секцией: var firebase = require("firebase"); // <-- Declare firebase variable here

Это мой рабочий компонент. Позвольте мне узнать о результате.

Answer 2

Вы установили firebase?

npm install firebase --save 

Я знаю, что это зависимость пакета angularfire2. Но ваш сценарий не нашел его.

Может у вас есть знать и решить вопрос: https://github.com/angular/angularfire2/issues/520

Answer 3

Итак, что оказалось, проблема заключалась в следующем:

я в конечном итоге пересмотра этот блок кода:

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

к это:

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

проблема заключалась в том, что я обращался к неправильному объекту, firebase, когда я должен иметь, звонил this.af.auth, как я определил public af: AngularFire в моем конструкторе.

там была еще одна ошибка, и это было то, что я называл неправильный метод на angularfire2 модуле:

я использовал

.createUserWithEmailAndPassword(email: email, password: password)

, когда я должен» ve использовали

.createUser({email, password})

Исправление этих двух проблем заставило приложение работать, как ожидалось, без ошибок.

@sugarme был правильный ответ, который я только что произошло, чтобы прийти к такому же выводу, прямо перед я оставил школу, чтобы у меня не было времени, чтобы разместить этот ответ до сих пор.

Спасибо всем!

PS Вот мой полный signup.component для справки:

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']) 
    } 
}