0

Cordial saludo colegas, estoy realizando un crud con angular y firestore usando angularfire, al traer una colección me encuentro con el siguiente error.

introducir la descripción de la imagen aquí

He revisado las importaciones y no le encuentro nada mal, les adjunto el código del 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 {AngularFireAuthGuard} from '@angular/fire/auth-guard';
import {AngularFirestore} from '@angular/fire/firestore';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { Page404Component } from './page404/page404.component';
import { NavbarComponent } from './navbar/navbar.component';
import { IndexComponent } from './index/index.component';
import { LoginComponent } from './auth/login/login.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    Page404Component,
    NavbarComponent,
    IndexComponent,
    LoginComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    AngularFireModule.initializeApp(environment.firebase),
  ],
  providers: [
    AngularFirestore,
    AngularFireAuthGuard
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

También adjunto el código de mi componente home donde estoy tratando de traer la colección

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {AngularFirestore} from '@angular/fire/firestore';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router, private db: AngularFirestore) { }
  ngOnInit(): void {
    this.db.collection('books').valueChanges()
      .subscribe(val => console.log(val));
  }
}

¿Alguna idea de que pueda estar mal?

4
  • Qué versión de angular y fire?
    – Bicho
    el 10 mar. 2020 a las 15:06
  • Hola , estoy usando la version "@angular/fire": "^6.0.0-rc.1", y angular 9.0.5 el 10 mar. 2020 a las 15:12
  • Esto te puede servir, hace mención a la versión 6 github.com/angular/angularfire/issues/2310
    – Bicho
    el 10 mar. 2020 a las 15:29
  • Justo acabo de leer ese, ya encontré la solución y me funciono, gracias, voy a poner la solución aquí el 10 mar. 2020 a las 15:33

3 respuestas 3

1

Creo que tienes instalado el '@angular/fire@next' para firebase, ahí tienes que pasas a tu componente a importar 'firebase/firestore' a tu componente de la siguiente manera:

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';
import {AngularFirestore} from '@angular/fire/firestore';
<!-- nuevo importe -->
import 'firebase/firestore';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(private router: Router, private db: AngularFirestore) { }
  ngOnInit(): void {
    this.db.collection('books').valueChanges()
      .subscribe(val => console.log(val));
  }
}

Este error me dio por la versión de angularfire que tenía y lo solucione así, dejo el enlace para que lo chequen igual.

https://github.com/angular/angularfire

0

El problema radica en la versión 6.0.0-rc.1 de angular fire, al parecer esta ya no importa el firestore en el AngularFireModule y por eso dispara ese error al momento de consultar, la solución que me funciono fue hacerle un downgrade al paquete angularfire a la versión 5.2.1.

0

Sólo haz la importación de firebase/firestore antes del AngularFirestore:

import 'firebase/firestore';
import { AngularFirestore } from '@angular/fire/firestore'

;

1
  • No me lo tomes a mal pero me parece extremadamente corta y pobre de contenido para considerarse como wiki, si deseas que prevalezca asi será mejor que la edites y amplies el por que de tu solición, de lo contrario creo solo recibirás negativos
    – BetaM
    el 10 mar. 2020 a las 23:34

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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