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.