Search code examples
angulartypescriptfirebasegoogle-cloud-firestorefirebase-extensions

How to implement Firebase Distributed Counter extension in Angular

I'm trying to implement the Firebase Distributed Counter Extension in my Angular application, but I'm not quite sure how to go about this. The instructions say to include the sharded-counter.js file in your project and they give the following example:

<html>
 <head>
  <script src="https://www.gstatic.com/firebasejs/[version]/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/[version]/firebase-firestore.js"></script>
  <script src="sharded-counter.js"></script>
</head>
<body>
 <script>
  // Initialize Firebase.
  var firebaseConfig = { projectId: "at-the-dinner-table" };
  firebase.initializeApp(firebaseConfig);
  var db = firebase.firestore();

  // Initialize the sharded counter.
  var visits = new sharded.Counter(db.doc("pages/hello-world"), "visits");

  // Increment the field "visits" of the document "pages/hello-world".
  visits.incrementBy(1);

  // Listen to locally consistent values.
  visits.onSnapshot((snap) => {
    console.log("Locally consistent view of visits: " + snap.data());
  });

  // Alternatively, if you don't mind counter delays, you can listen to the document directly.
  db.doc("pages/hello-world").onSnapshot((snap) => {
    console.log("Eventually consistent view of visits: " + snap.get("visits"));
  });
 </script>
 </body>
</html>

I have tried importing this file with import * as sharded from 'file path' but then I get the message that Counter is not a constructor. I'm sure there's something that I'm missing, so any help would be greatly appreciated!

Solution

  • I ended up using the Typescript file instead. In the file where I implemented the sharded counter, I imported the TS file with import * as sharded from 'file path' and I had to import Firebase in the TS file. After that, everything worked as intended.

    I'm still interested in knowing why the minimized JS file didn't work in the same fashion, but I'm happy that everything is working now!