Using @angular/[email protected] Unable to access firebase.firestore.FieldValue.serverTimestamp()

Question

I have been trying to add timestamp field to my firestore documents.

I am also sharing a PDF with relevant code.

The project environment is Ionic 6.12.0.

Trying to access Firestore.FieldValue.serverTimestamp()

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

import {firebase} from '@firebase/app';

@Injectable({
  providedIn: 'root'
})
export class FireTimestampService {

  constructor(private afs: AngularFirestore) { }

  timestamp(): any {
    return this.afs.FieldValue.serverTimestamp();
  }

  timestamp2(): any {
    return firebase.firestore.FieldValue.serverTimestamp();
  }
}

Actual Usage once firestore is accessible:

import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

import * as firebase from 'firebase';

@Injectable({
  providedIn: 'root'
})

type DocPredicate<T> = string | AngularFirestoreDocument<T>;

export class FireTimestampService {

  constructor(private afs: AngularFirestore) { }

  doc<T>(ref: DocPredicate<T>): AngularFirestoreDocument<T> {
    return typeof ref === 'string' ? this.afs.doc<T>(ref) : ref;
  }

  timestamp(): any {
    return firebase.firestore.FieldValue.serverTimestamp();
  }

  set<T>(ref: DocPredicate<T>, data: any ) {
    const timestamp = this.timestamp;
    return this.doc(ref).set({
      ...data,
      updatedAt: timestamp,
      createdAt: timestamp
    });
  }
}

My list of node-modules: ├── @angular-devkit/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @angular/[email protected] ├── @capacitor/[email protected] ├── @capacitor/[email protected] ├── @capacitor/[email protected] ├── @capacitor/[email protected] ├── @ionic-native/[email protected] ├── @ionic-native/[email protected] ├── @ionic-native/[email protected] ├── @ionic/[email protected] ├── @ionic/[email protected] ├── @types/[email protected] ├── @types/[email protected] ├── @types/[email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] └── [email protected]

Answer 1

You can get the timestamp from firestore:

import { firestore } from 'firebase';

// ...

const timestamp = firestore.Timestamp.now();

https://firebase.google.com/docs/reference/js/firebase.firestore.Timestamp#static-now

Answer 2

Thanks for Lucas for putting me on the right path.

With import { firestore } from 'firebase';

I was getting following warnings:

It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use.

For the module builds, these are available in the following manner (replace with the name of a component - i.e. auth, database, etc):

Typescript:

import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';

With given hint, I tired:

import * as firebase from 'firebase/app';

function:

getTimestamp() {
  return firebase.firestore.Timestamp.now();
}

Folks : There is catch

It does not work with @angular/fire 6.0.4 + firebase 8.0.0
It works with @angular/fire 6.0.3 + firebase 7.24.0

Thanks again Lucas.