0

Estoy implementando Firebase en Angular 6, compila y conecta bien aparantemente con mi BD pero no recupera ningún dato, al inspeccionar la pagina en modo consola devuelve este error:

 index.esm.js:77 [2019-02-14T11:27:50.684Z]  @firebase/firestore: Firestore (5.8.1): 
  The timestampsInSnapshots setting now defaults to true and you no
  longer need to explicitly set it. In a future release, the setting
  will be removed entirely and so it is recommended that you remove it
  from your firestore.settings() call now.

app.module.ts:

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

import { APP_ROUTING } from './app-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
/*Materials*/
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
/*Animaciones*/ 
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
/*FxFlex*/ 
import {FlexLayoutModule} from '@angular/flex-layout';
/*Base de datos*/
import { HttpClientModule } from '@angular/common/http';
import { AdunitService } from './adunit.service';
/*Servicios*/
import { ServicesService } from './service/services.service';

import {MatButtonModule, MatCheckboxModule, MatNativeDateModule, MatSelectModule} from '@angular/material';
import { ReporteComponent } from './Componente/reporte/reporte.component';
import { DatosInComponent } from './Componente/datos-in/datos-in.component';

import {MatCardModule} from '@angular/material/card';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';
import {MatDatepickerModule} from '@angular/material/datepicker';
import { ReporteSolucionadoComponent } from './Componente/reporte-solucionado/reporte-solucionado.component';
import { ColoresComponent } from './Componente/colores/colores.component';
import { FilterPipe} from './filter.pipe';
import {AngularFireModule} from '@angular/fire';
import {environment} from '../environments/environment'
import {AngularFirestoreModule} from '@angular/fire/firestore';


@NgModule({

  declarations: [
    AppComponent,
    ReporteComponent,
    DatosInComponent,
    ReporteSolucionadoComponent,
    ColoresComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    NoopAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    MatCardModule,
    MatToolbarModule,
    MatIconModule,
    FlexLayoutModule,
    MatInputModule,
    MatNativeDateModule,
    MatDatepickerModule,
    ReactiveFormsModule,
    FormsModule,
    APP_ROUTING,
    MatSelectModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,

  ],
  providers: [
    MatDatepickerModule,
    ServicesService,
    AdunitService,
    AngularFireModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

services.service.ts:

import { Injectable } from '@angular/core';
//Archivo json
import _reportes from "../archivos json/reportes.json";
import _vacio from "../archivos json/vacio.json";
//Exportador pdf
import * as jsPDF from 'jspdf';
//firebase
import {AngularFireList} from '@angular/fire/database'
import {AngularFirestore} from '@angular/fire/firestore';


@Injectable({
  providedIn: 'root'
})
export class ServicesService {
   listaReportes:AngularFireList<any>
   reportesMargis;
   reportes;


  ColeccionDeReportes;
  Reporte;

  constructor(public firebase:AngularFirestore) { 
    this.reportes = this.firebase.collection('reporte').valueChanges();
  }



  insertarReporte(report:Reporte)
  {
    this.listaReportes.push({
      titulo: report.titulo,
      solucionado: report.solucionado,
      ruta: report.ruta,
      prioridad: report.prioridad,
      funcion: report.funcion,
      fecha: report.fecha,
      comentario: report.comentario
    })
  }

  getReportes():Reporte[] {
    this.reportesMargis = [];
    let ruta:string = window.location.pathname; 

    if(ruta == "/porSolucionar"){
      for(let report of this.reportes){
        if(report.solucionado == false){
          this.reportesMargis.push(report)
        }
      }
    }
    else {
      for(let report of this.reportes){
        if(report.solucionado == true){
          this.reportesMargis.push(report)
        }
      }
    }


    return this.reportesMargis;
}

  addReporte(reporte:Reporte):void {
    this.reportes.unshift(reporte);
}

cambioDeEstado(referencia:string):void{
  let indice = this.buscarEnArrayRep(referencia, this.reportes)
  if(this.reportes[indice].solucionado == true){
    this.reportes[indice].solucionado = false;
  }else{
    this.reportes[indice].solucionado = true;
  }

}




convert(reporteAExportar) {
  let linea = " "
  let y = 0;
  let saltoDeLina = 80
  let indice = this.buscarEnArrayRep(reporteAExportar, this.reportes);
  let reporteBuscado = this.reportes[indice]
  var doc = new jsPDF();
  doc.addPage();
  doc.setPage(1);

      doc.setFontSize(25);
      doc.text(70, 10,"Informe Incidencia");
      doc.setFontSize(15);
      doc.text(5, 20,"Titulo: " + reporteBuscado.titulo);
      doc.text(5, 30,"Fecha: " + reporteBuscado.fecha);
      doc.text(5, 40,"Ruta: " + reporteBuscado.ruta);
      doc.text(5, 50,"Prioridad:")
      if(reporteBuscado.prioridad == 1){
        doc.text(5, 60,"Poco Urgente")
      }
      else if(reporteBuscado.prioridad == 2){
        doc.text(5, 60,"Urgente")
      }else{
        doc.text(5, 60,"Muy urgente")
      }       
      doc.text(5, 70,"Funcion:")
      doc.setFontSize(12);
      doc.setTextColor(0, 102, 255)
      while(y < reporteBuscado.funcion.length){
        linea = " "
        let aux = y + 80          
          for(let i = y; i < aux; i++){
            if(i < reporteBuscado.funcion.length)linea += reporteBuscado.funcion[i];
          }    
        y+=80
        doc.text(20,saltoDeLina, linea)
        saltoDeLina += 10
      }
      doc.setPage(2);
      saltoDeLina = 15;
      doc.setFontSize(15);
      doc.setTextColor(0, 0, 0)
      doc.text(5, saltoDeLina,"Motivo:");
      doc.setFontSize(12);
      doc.setTextColor(0, 102, 255)
      saltoDeLina += 10;
      linea = " "
      y = 0;
      while(y < reporteBuscado.comentario.length){
        linea = " "
        let aux = y + 80          
          for(let i = y; i < aux; i++){
            if(i < reporteBuscado.comentario.length)linea += reporteBuscado.comentario[i];
          }    
        y+=80
        doc.text(20,saltoDeLina, linea)
        saltoDeLina += 10
      }


  doc.save(reporteBuscado.titulo + "/" + reporteBuscado.fecha + ".pdf");
}

buscarEnArrayRep(referencia:string, lista:Reporte[] ):number{
  let contador = 0;
  for(let rep of lista){
    let titulorec:string = rep.titulo
    if(referencia == titulorec){
      break
    }
    else contador += 1
  }
  return contador
}



}

export interface Reporte {
  titulo:string;
  fecha:Date;
  ruta:string;
  prioridad:number;
  funcion:string;
  comentario:string;
  solucionado:boolean;
}

environment.ts:

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "AIzaSyAKRK8ljfqqbsCHb0PogHybwDrBH-KgqGI",
    authDomain: "incidencias-13dc5.firebaseapp.com",
    databaseURL: "https://incidencias-13dc5.firebaseio.com",
    projectId: "incidencias-13dc5",
    storageBucket: "incidencias-13dc5.appspot.com",
    messagingSenderId: "838606399978",
  }
};

Mi intención es conseguir recuperar los datos y poder mostrarlos en mi app de Angular 6.

1
  • El error que comentas no es el que está provocando el problema, ese es un cambio que se va a hacer a futuro pero no debería de estar afectando el problema de conexión.
    – Jemonge
    Commented el 14 feb. 2019 a las 18:00

1 respuesta 1

1

Hola puedes usar FirestoreSettingsToken para solucionarlo

import { AngularFirestoreModule, FirestoreSettingsToken } from '@angular/fire/firestore';
@NgModule({
  declarations: [AppComponent],
  imports: [
     ...
     AngularFirestoreModule,
     ...
  ],
  providers: [{ provide: FirestoreSettingsToken, useValue: {} }],
  bootstrap: [AppComponent]
})
export class AppModule { }

si en la consola aparece un behavior for date puede agregar al app.component

import * as firebase from 'firebase';
    constructor() {
      const firestore = firebase.firestore();
      const settings = {/* tu configuracion... */ timestampsInSnapshots: true};
      firestore.settings(settings);
    }

eso lo solucionara por completo e impedira cambios que rompan tu proyecto

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.