1

Estoy haciendo un login con angular 7 y firebase, estoy usando angular/angularfire2. Hago el formulario, configuro todo, hago las importaciones necesarias. Todos los elementos visualizan sin ningun problema en el navegador( todavia no le di funcionalidad al boton para iniciar sesion ), hasta que pongo una variable en el constructor:

constructor(public afAuth: AngularFireAuth) {} 

A partir de esto ya no se visualiza nada en el navegador y la consola me lanza este error:

en firefox:

ERROR Error: "[object Object]"

en Chrome:

vendor.js:47983 ERROR Error: Uncaught (in promise): Error: 
StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
NullInjectorError: No provider for AngularFireAuth!
Error: StaticInjectorError(AppModule)[LoginComponent -> AngularFireAuth]: 
       StaticInjectorError(Platform: core)[LoginComponent -> AngularFireAuth]: 
NullInjectorError: No provider for AngularFireAuth!

Dejo algunos archivos por si son necesarios.

environment.ts:

export const environment = {
  production: false,
  config : {
    apiKey: "AIlpSyC5FYtKiisQApqldxL_-8Vjtk0_01llALU",
    authDomain: "axxxxxx.firebaseapp.com",
    databaseURL: "https://axxxxxx.firebaseio.com",
    projectId: "axxxxxx",
    storageBucket: "axxxxxxx.appspot.com",
    messagingSenderId: "123456789101"
  }

};

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { environment } from "../environments/environment";
import { AngularFireModule } from "@angular/fire";
import { AngularFireDatabaseModule } from "@angular/fire/database";

import {RouterModule, Routes} from '@angular/router';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { PrincipalComponent } from './principal/principal.component';
import { FormsModule } from '@angular/forms';

export const rutas: Routes = [
  { path: '',          component: PrincipalComponent},
  { path: 'login',          component: LoginComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    PrincipalComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(rutas),
    AngularFireModule.initializeApp(environment.config),
    AngularFireDatabaseModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

login.component.ts:

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})

export class LoginComponent implements OnInit {
  email = '';
  pass = '';

  constructor(public afAuth: AngularFireAuth) {}

  loginGoogle() {
    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
  }
  logout() {
    this.afAuth.auth.signOut();
  }

  ngOnInit() {}

}

Solo cuando pongo esa variable en el constructor aparece el problema. Gracias a todos de antemano.

1 respuesta 1

0

Hola creo que estas olvidando.

app.module import { AngularFireAuthModule } from 'angularfire2/auth';

LoginComponent import { AngularFireAuth } from 'angularfire2/auth';

Firebase_Google_Auth

8
  • el error sale cuando escribo afAuth: AngularFireAuth en el constructor, para eso hice el import del AngularFireAuth. Puedo hacer ese import de tu respuesta, pero nunca lo uso dentro del archivo. y aun asi el error sigue Commented el 1 ene. 2019 a las 19:19
  • El import lo estas haciendo en app.module?. Ahí es donde recomiendo el import. Commented el 1 ene. 2019 a las 19:31
  • Ni así se soluciona, recién hice la prueba. El error de Chrome marca con angularFireAuth. Commented el 1 ene. 2019 a las 19:49
  • Creo que en el LoginComponent, estabamos usando el AngularFireAuth del lugar incorrecto. Commented el 1 ene. 2019 a las 19:56
  • @VíctorHugoTirado probaste con los dos import que te pues? Commented el 1 ene. 2019 a las 20:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.