Major release 7.0.0

[jamesdaniels]

Breaking changes

• Angular 12 is required
• AngularFire now only works in Ivy applications
• Firebase JS SDK v9 is required
• The existing AngularFire v6 API surface has moved from @angular/fire/* to @angular/fire/compat/* (see compatibility mode)
• 新建 modular API surface available at @angular/fire/*
• Various cleanup

See the v7 upgrade guide for more information.

---

This discussion was created from the release 7.0.0.

[jamesdaniels]

Hey all, sorry the comms have been light here, we've been super busy at work on this release. Exciting to have more folk give it a spin!

We released right alongside the new Firebase JS SDK, RxFire, ReactFire, and FirebaseUI today; so there were a lot of moving pieces this morning.

I expect we'll have a bunch of doc work in the coming days (especially with the new modular SDK), a couple quick patch releases to address feedback, and likely a 7.1 release with a couple goodies I wasn't able to finish for today.

Thanks so much to folk that were involved in helping test the alphas, betas, and release candidates here. And thank you to everyone in the community for being so patient while we work to reduce bundle size, modernize, and rewrite everything in the JS SDK so it can be tree-shakable. I know this is a big one, that's why we added firebase/compat / @angular/fire/compat, so we can move forward with the new architecture without forcing you to jump into a huge rewrite of your codebase day-0.

Happy Firebasing! 🔥 🥳 🎉

[spicemix]

Congratulations on releasing v7!!!

If I were to prioritize anything, I'd get /sample up to the functionality of /sample-compat first, including use of the emulators, on the theory that running and testable example code is worth more than verbiage. I wasn't able on first glance to get /compat code running with the emulators either (the localhost URLs weren't working on auth), and I might go directly to non-compat once I get enough example code to understand enough of the API. (If anyone has a good example visible somewhere in the meantime I'd appreciate seeing it thx.)

Thanks!

[jamesdaniels]

Thanks! Absolutely agree, the sample is also where I experiment with the new APIs and serves as my primary smoke test when developing. You’ll definitely be seeing that get flushed out in the coming days.

I forgot to document that broke the Auth emulator DI. It now matches the parameters that useEmulator takes directly.

[akshaybabloo]

Is v7 ready for production or is the API still experimental?

[jamesdaniels]

v7 is ready for production, the new modular API is still not up to feature parity or documented beyond types ATM but that gap is closing quickly. I'm planning on abiding by semver but may take some liberties as that API is still very young. Known issues are largely around Zone.js and SSR ATM as the new Zone wrapper needs the kinks ironed out.

Compat locked down is close to what I would consider feature complete and will not be receiving as much investment.

For the most part the new API is pretty simple. It consists of the Dependency Injection (provideApp, provideFirestore, etc.), Zone wrapped reexports of the entire JS SDK, and Zone wrapped reexports of RxFire (with some naming changes to not collide with vanilla JS SDK). You can see it & some work to lazy load some modules in action on the sample repo.

[mattbodman]

So far this is great. However, I'm probably being a bit dumb here, because I can't figure out how to add query params (where, limit, orderBy etc) to collectionRefs using the new API? What am I missing?

[jamesdaniels]

Build the query off the ref, pass that to collectionData.

[jamesdaniels]

const ref = collection(firestore, 'users');
const query = query(ref, where(…), orderBy(…), …);
const users$ = collectionData(query, {idField: 'id'})

[mattbodman]

const ref = collection(this.firestore, 'clients');
const queryRef = ref.where('active', '==', true); // property 'where' does not exist on type CollectionReference

[jamesdaniels]

Make sure you’re highlighted on v9 modular tab on the firebase docs. query is now a pure function that can be tree-shaken.

[mattbodman]

Aah all making sense now, thank you so much!

[bjorgensentanduo]

In previous versions of angularfire we were able to call createId to generate a firestore document id. Is there any equivalent method in the new release of angularfire 7.0.0?

[spicemix]

I got something like this off Puf at some point

export const newFirebaseId = () => {
  const chars =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let autoId = '';
  for (let i = 0; i < 20; i++) {
    autoId += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  return autoId;
};

[BookmanAG]

  constructor(private readonly afs: Firestore) {}

  createId(): string {
    return doc(collection(this.afs, '_')).id;
  }

[mattbodman]

You can create a ref with an autoId by doing this:

const newUserRef = doc(collection(this.firestore, 'users'));
// console.log(newUserRef.id) 
await setDoc(newUserRef, {name: 'Bob'});

[mattbodman]

Using v7, how can we get a task reference so we can track progress when uploading an object to storage? The uploadString method only returns a Promise. I can see a method called createUploadTask but I'm unsure how to use it. Any clues would be great.