Firebase Firestore showing warning

Question

I am doing a project with ionic 3 and firebase firestore used as the database.

But My firebase firestore showing warning whenever I making a CRUD operation.

 index.esm.js:77 [2018-05-02T05:45:40.408Z]  @firebase/firestore: 
 Firestore (4.13.0): 
 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:

 // Old:
 const date = snapshot.get('created_at');
 // New:
 const timestamp = snapshot.get('created_at');
 const date = timestamp.toDate();

 Please audit all existing usages of Date when you enable the new 
 behavior. In a
 future release, the behavior will change to the new behavior, so if 
 you do not
 follow these steps, YOUR APP MAY BREAK.

Answer 1

I added below code in app.module.ts then error correct.

firebase.initializeApp(environment.firebase) // Load firebase server settings

firebase.firestore().settings( { timestampsInSnapshots: true })

Answer 2

I just reinstalled "angularfire2". It's already fixed about issue.

• npm uninstall angularfire2
• npm install angularfire2@5.0.0-rc.9

release version info : https://github.com/angular/angularfire2/releases

Answer 3

I had the same issue, if you use Angular and angularfire2 this may helps you:

As the warning shows, you should set the timestampsInSnapshots property to true when your app init. You can call it in constructor of AppComponent:

import { AngularFirestore } from 'angularfire2/firestore';

export class AppComponent {

    constructor(db: AngularFirestore) {
        const settings = { timestampsInSnapshots: true };
        db.app.firestore().settings(settings);   
    }

}

To avoid warning you could set settings type:

import { AngularFirestore } from 'angularfire2/firestore';
import * as firebase from 'firebase';

export class AppComponent {

    constructor(db: AngularFirestore) {
        const settings: firebase.firestore.Settings = { timestampsInSnapshots: true };
        db.app.firestore().settings(settings);   
    }

}

AppModule's constructor also a good place to call this code, it's up to you what you use.

Answer 4

Once you implement this setting, dates will no longer come back as javascript Dates. They will be Firestore Timestamps. Your code will most likely be impacted. I created the following function to convert any Timestamp properties of any object to javascript Date properties.

private convertFirestoreTimestampsToDates(myObject: any): void {
  for (let propertyName in myObject) {
    if (myObject.hasOwnProperty(propertyName)) {
      if (myObject[propertyName]) {
        if (myObject[propertyName].__proto__.constructor.name === 'Timestamp') myObject[propertyName] = myObject[propertyName].toDate();
      }
    }
  }
}

Answer 5

To enhance answer from 'farkasnorbert90' that I used afs.firestore.settings instead of db.app.firestore() in my app.component.ts

import * as firebase from 'firebase';
import { AngularFirestore } from 'angularfire2/firestore';

  constructor(
    public auth: AuthService,
    afs: AngularFirestore,
  ) {
    const settings: firebase.firestore.Settings = {
      timestampsInSnapshots: true,
    };
    afs.firestore.settings(settings);
  }