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
    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

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.