Firebase-js-sdk: The behavior for Date objects stored in Firestore is going to change AND YOUR APP MAY BREAK

[AmaanKulshreshtha]

I am developing an Angular app with firebase.

This is the error that I am getting:

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.

This is my package.json file:

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"angularfire2": "^5.0.0-rc.6.0",
"core-js": "^2.4.1",
"firebase": "^4.13.1",
"rxjs": "^5.5.6",
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "~1.7.4",
"@angular/compiler-cli": "^5.2.0",
"@angular/language-service": "^5.2.0",
"@types/jasmine": "~2.8.3",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "~2.5.3"
}

Firebase -v: 4.13.1
AngularFire -v: 5.0.0-rc.6.0
OS: Mac OSX / Windows (tried it on both the platforms.)

Also, what is the reason behind this error?

[google-oss-bot]

Hmmm this issue does not seem to follow the issue template. Make sure you provide all the required information.

[google-oss-bot]

Hey there! I couldn't figure out what this issue is about, so I've labeled it for a human to triage. Hang tight.

[software770-2]

Wow, I'm having the same issue and I'm using "npm install angularfire2 firebase". This is really a problème, because, with these modules, I don't have firebase.firestore(); variable...

I changed the configuration to have "timestampsInSnapshots: true" in the firebaseConfig, but nothing.

[Nostrus]

@software770 This is how you do it in an angularfire2 service:

    constructor (
        private db: AngularFirestore
    ) {
        db.firestore.settings({ timestampsInSnapshots: true });
    }

After this i got rid of the console error.

[nileshverma82]

@Nostrus can you please specify which file I should add this? apologies I'm new to firestore.

[Nostrus]

@nileshverma82 The warning says

you need to add the following code to your app before calling any other Cloud Firestore methods

So I just added it all my services' constructors to make sure this is set before the service methods are called. Maybe a better solution could be to add it to your app.component.ts file's constructor, but I haven't tried that yet, so can't confirm.

[nileshverma82]

@Nostrus Thanks It's working 👍

[joshmalouf]

took @Nostrus suggestion of adding the assingment to app.component.ts. Works wells..

`import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor (private afs: AngularFirestore ) {
const firestore = afs.firestore.settings({timestampsInSnapshots: true});
}
}
`

[RedHead93]

@Nostrus @joshmalouf I tried to adding the code correctly into the app.component.ts (or everywhere before any call to firebase), but the console shows me this error:

Firestore has already been started and its settings can no longer be changed. You can only call settings() before calling any other methods on a Firestore object.

[Denisijcu]

Yeah, that is the solutions. but What happen now with the pipe

[bene950109]

@RedHead93 I also get this error, whereever I try to set firestore settings. Did you find any solution for this?

[RedHead93]

@bene950109 Unfortunately not.. I'm still struggling... :'(

[Nostrus]

@RedHead93 can you share your code here and show where and how have you tried setting this? Did you call it more than once maybe?

[RedHead93]

@Nostrus I called it just once. :) Here is my code (I just wrote the related part):

This is my app.component.ts:

import ...
import { AngularFirestore } from 'angularfire2/firestore';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  rootPage: any = HomePage;
  public pages: Page[];

  constructor(
    ...
    afs: AngularFirestore
  ) {
    this.initializeApp();
    afs.firestore.settings({timestampsInSnapshots: true});
    this.pages = [
      { title: 'Carne', component: CarnePage },
      { title: 'Formaggi', component: FormaggiPage },
      { title: 'Pesce', component: PescePage },
      { title: 'Verdure', component: VerdurePage },
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  navigateTo(component) {
    this.nav.push(component);
  }
}

[SMontiel]

@RedHead93 Maybe you had called AngularFirestoreModule.enablePersistence() instead of simply AngularFirestoreModule:

@NgModule({
declarations: [
AppComponent,
...
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireAuthModule,
AngularFirestoreModule.enablePersistence()
],
providers: [...],
bootstrap: []
})
export class AppModule { }

[bene950109]

@SMontiel yes, I called enablePersistence(). Should I first set the:

afs.firestore.settings({timestampsInSnapshots: true});

and then later can I call enablePersistence() ?

[SMontiel]

@bene950109 I'm searching for that! 😂

[bene950109]

well, now I was able to resolve the issue using this solution:

In the app.module.ts, in the imports section, changed AngularFirestoreModule.enablePersistence() to simplee AngularFireStoreModule;
and in my app.component 's constructor I use:

constructor(private _db: AngularFirestore) {
        _db.firestore.settings({ timestampsInSnapshots: true });
        _db.firestore.enablePersistence();
    }

Using this, offline behaviour still works, Firestore's console error about Date usage changes dissapeared, now I just have to refactor the code where I receive the timestamps from firestore to call .toDate() on them at mapping, to let me work with Date objects instead of Timestamp objects.

[RedHead93]

@bene950109 Just tried, well done!!
I tried something similar yesterday but I got errors.
But you solved this! This is the right way! Thank you so much!

[SMontiel]

Just found this issue:
https://github.com/angular/angularfire2/issues/1575