Ionic problem with firestore 'The behavior for Date objects stored in Firestore is going to change'

Question

i am currently having problems with my crud using firestore, for some reason whenever i compile, i get the following errors:

index.esm.js:77 [2018-09-13T17:35:48.498Z]  @firebase/firestore: Firestore (5.0.4): 
The behavior for Date objects stored in Firestore is going to change
AND YOUR APP MAY BREAK.
To hide this warning and ensure your app does not break, you need to add the
following code to your app before calling any other Cloud Firestore methods:

  const firestore = firebase.firestore();
  const settings = {/* your settings... */ timestampsInSnapshots: true};
  firestore.settings(settings);

With this change, timestamps stored in Cloud Firestore will be read back as
Firebase Timestamp objects instead of as system Date objects. So you will also
need to update code expecting a Date to instead expect a Timestamp. For example:

I tried doing as suggested and passing it as the following

apiKey: "**********", authDomain: "************", databaseURL: "************", storageBucket: "*****************", messagingSenderId: "*************", projectId: "***********",

I am still getting the same errors too. Another problem that seems to be bugging me is to wether this is the only issue, or is there something wrong with my code. Because i don't know if this error is preventing my app from running properly, i am trying to get information from my firebase and nothing shows up. Usually the page shows an error, when chrome developer also shows an error. In this case, the error is limited to the chrome developer tab. Therefore, my data that i am trying to reach in firestore, is not being displayed. Here's my code

contact.ts

import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import firebase from 'firebase';
import {AngularFirestore} from 'firebase/firestore';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
  public dataJSON;
  public dataAux;

  constructor(public navCtrl: NavController,
    public alertCtrl: AlertController) {
     // afs.firestore.settings({ timestampsInSnapshots: true });
    let db = firebase.firestore();
    var auxint = 0;
    this.dataAux
    let auxString = '[';
    db.collection('teste').where("Deletado", "==", false).get().then(res => {
      res.forEach(item => {

        //pegue todos os dados do banco e crie um novo JSON com as informações de 
        auxint++;
        auxString += '{"id":"' + item.id + '","documento":' + JSON.stringify(item.data()) + '}';

        if (res.size != auxint)
          auxString += ', ';
      })
      auxString += ']';
      this.dataJSON = JSON.parse(auxString);

    }).catch(err => {
      console.log('Error: ' + err);
    });
  }
  doAlert(a: string) {
    const alert = this.alertCtrl.create({
      title: 'ID',
      subTitle: 'ID is: ' + a,
      buttons: [
        {
          text: 'Item has been deleted',
          handler: () => {
            let db = firebase.firestore();
            db.collection('teste').doc(a).update({ Deletado: true, DataUpdate: firebase.firestore.FieldValue.serverTimestamp() }).then(res => {
              const alert1 = this.alertCtrl.create({
                title: 'Deleted',
                subTitle: 'Youve deleted: ' + a,
                buttons: [
                  {
                    text: 'Deleted',
                    handler: () => {
                      location.reload();
                    }
                  }
                ]
              })
              alert1.present();
            }).catch(() => {
              console.log("An error occurred");
            })
          }
        },
        {
          text: 'Cancel',
          role: 'cancel',
          handler: () => {
            console.log('Buy clicked');
          }
        }
      ]
    });
    alert.present();
  }
}

contact.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Consulta firebase
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-list-header>Nomes armazenados do banco</ion-list-header>
    <ion-item>
      @ionicframework 
    </ion-item>
    <ion-item *ngFor="let data of dataJSON">
      <ion-icon name="ionic" item-start></ion-icon>

      <p>ID: {{data.id}}</p>
      <p>Data Criação: {{data.DataCriacao}}</p>
      <p>Data ultima atualizacao: {{data.DataUpdate}}</p>
      <p>Deletado: {{data.Deletado}}</p>
      <p>Nome: {{data.nome}}</p>
      <p>Numero: {{data.number}}</p>
      <button ion-button  block color="dark" (click)='doAlert(data.id)'>
        Alerta ID
      </button>
    </ion-item>
  </ion-list>

</ion-content>

xnok xnok · Accepted Answer · 2018-09-20T19:07:20

The problem with this question was in this lineauxString += '{"id":"' + item.id + '","documento":' + JSON.stringify(item.data()) + '}';, i forgot to change my 'documento' text to the one im using to test my query.

Ionic problem with firestore 'The behavior for Date objects stored in Firestore is going to change'

1 Answers