@angular/fire 7.6.1 → 16.0.0-canary.e04cd7f

package/docs/compat/emulators/emulators.md

@@ -1,134 +0,0 @@
-# Connect your app and start prototyping
-
-In this guide, we'll look at how to use `@angular/fire` to connect an Angular application with Firebase Emulator Suite to start prototyping your apps.
-
-> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
-
-There are four supported emulators, all of them available at the Firebase suite workflow:
-
-- [Authentication Emulator](https://firebase.google.com/docs/emulator-suite/connect_auth)
-- [Realtime Database Emulator](https://firebase.google.com/docs/emulator-suite/connect_rtdb)
-- [Cloud Firestore Emulator](https://firebase.google.com/docs/emulator-suite/connect_firestore)
-- [Cloud Functions Emulator](https://firebase.google.com/docs/emulator-suite/connect_functions)
-
-**The Auth Emulator only works with Firebase v8 and above, which is supported by `@angular/fire` 6.1.0 or higher**.
-
-Before configuring these emulators at the Angular App, be sure to install the ones you need by following the [Install, configure and integrate Local Emulator Suite](https://firebase.google.com/docs/emulator-suite/install_and_configure) documentation.
-
-_**TL;DR**_
-
-Initialize firebase to your project (if you haven't) by running:
-
-```shell
-firebase init
-```
-
-Then launch the emulator setup wizard by running:
-
-```shell
-firebase init emulators
-```
-
-Follow the instructions to download whatever emulator you want to use then checkout that the `firebase.json` file got updated with the default ports per emulator, something like this:
-
-```jsonc
-{
-  // Existing firebase configuration ...
-  // Optional emulator configuration. Default
-  // values are used if absent.
-  "emulators": {
-    "firestore": {
-      "port": "8080"
-    },
-    "ui": {
-      "enabled": true, // Default is `true`
-      "port": 4000     // If unspecified, see CLI log for selected port
-    },
-    "auth": {
-      "port": "9099"
-    },
-    "functions": {
-      "port": "5001"
-    },
-    "database": {
-      "port": "9000"
-    },
-    "pubsub": {
-      "port": "8085"
-    }
-  }
-}
-```
-
-## Import the DI Tokens at your AppModule
-
-Configuring your app to connect to local emulators is easily done by using dependency injection tokens provided by the library. However, there are slighty changes between 6.0.0 and 6.1.0 in the way it was done.
-
-### 6.1.0 Method
-
-Each module (database, firestore, auth, function) provides `USE_EMULATOR` token to configure the emulator `host` and `port` by passing a tuple of `[string, number]` values, which are set by default to `localhost` and the asigned port from your `firebase.json` file.
-
-Import these tokens at your `app.module.ts` as follow:
-
-```ts
-import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
-import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/compat/database';
-import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/compat/firestore';
-import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/compat/functions';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    // ... Existing Providers
-    { provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
-    { provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
-    { provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
-    { provide: USE_FUNCTIONS_EMULATOR, useValue: environment.useEmulators ? ['localhost', 5001] : undefined },
-  ]
-})
-export class AppModule { }
-```
-
-The environment `useEmulators` flag is used to control whenever the app should connect to the emulators, which is usually done in non-production environments.
-
-Also you can opt-in the new way of setting the Cloud Functions [origin](https://firebase.google.com/docs/functions/locations) in Firebase v8 by using the `NEW_ORIGIN_BEHAVIOR` token in conjuction with the already present `ORIGIN` token.
-
-```ts
-import { isDevMode, NgModule } from '@angular/core';
-import { ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/compat/functions';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    // ... Existing Providers
-    { provide: NEW_ORIGIN_BEHAVIOR, useValue: true },
-    { provide: FUNCTIONS_ORIGIN, useFactory: () => isDevMode() ? undefined : location.origin },
-  ]
-})
-export class AppModule { }
-```
-
-### 6.0.0 Method
-
-With the exception of the Auth Emulator, the old way of setting the `host` and `port` for each emulator was done using a different set of tokens by passing the entire url path as string.
-
-```ts
-import { URL as DATABASE_URL } from '@angular/fire/compat/database';
-import { ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/compat/functions';
-import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/compat/firestore';
-
-@NgModule({
-  // ... Existing configuration
-  providers: [
-    {
-      provide: DATABASE_URL,
-      useValue: environment.useEmulators ? `http://localhost:9000?ns=${environment.firebase.projectId}` : undefined
-    },
-    { provide: FIRESTORE_SETTINGS, useValue: environment.useEmulators ? { host: 'localhost:8080', ssl: false } : {} },
-    { provide: FUNCTIONS_ORIGIN, useFactory: environment.useEmulators ? 'http://localhost:5001' : undefined },
-  ]
-})
-export class AppModule { }
-```
-
-For older versions, please upgrade your app to latest version to get the advantages of these new features :rocket: 

package/docs/compat/firestore/collections.md

@@ -1,326 +0,0 @@
-# 3. Collections in AngularFirestore
-
-> Cloud Firestore is a NoSQL, document-oriented database. Unlike a SQL database, there are no tables or rows. Instead, you store data in *documents*, which are organized into *collections*.
-Each *document* contains a set of key-value pairs. Cloud Firestore is optimized for storing large collections of small documents.
-
-> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
-
-## Using `AngularFirestoreCollection`
-
-The `AngularFirestoreCollection` service is a wrapper around the native Firestore SDK's [`CollectionReference`](https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference) and [`Query`](https://firebase.google.com/docs/reference/js/firebase.firestore.Query) types. It is a generic service that provides you with a strongly typed set of methods for manipulating and streaming data. This service is designed for use as an `@Injectable()`.
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
-import { Observable } from 'rxjs';
-
-export interface Item { name: string; }
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <ul>
-      <li *ngFor="let item of items | async">
-        {{ item.name }}
-      </li>
-    </ul>
-  `
-})
-export class AppComponent {
-  private itemsCollection: AngularFirestoreCollection<Item>;
-  items: Observable<Item[]>;
-  constructor(private afs: AngularFirestore) {
-    this.itemsCollection = afs.collection<Item>('items');
-    this.items = this.itemsCollection.valueChanges();
-  }
-  addItem(item: Item) {
-    this.itemsCollection.add(item);
-  }
-}
-```
-
-The `AngularFirestoreCollection` is a service you use to create streams of the collection and perform data operations on the underyling collection.
-
-### The `DocumentChangeAction` type
-
-With the exception of the `valueChanges()`, each streaming method returns an Observable of `DocumentChangeAction[]`.
-
-A `DocumentChangeAction` gives you the `type` and `payload` properties. The `type` tells when what `DocumentChangeType` operation occured (`added`, `modified`, `removed`). The `payload` property is a `DocumentChange` which provides you important metadata about the change and a `doc` property which is the `DocumentSnapshot`.
-
-```ts
-interface DocumentChangeAction {
-  //'added' | 'modified' | 'removed';
-  type: DocumentChangeType;
-  payload: DocumentChange;
-}
-
-interface DocumentChange {
-  type: DocumentChangeType;
-  doc: DocumentSnapshot;
-  oldIndex: number;
-  newIndex: number;
-}
-
-interface DocumentSnapshot {
-  exists: boolean;
-  ref: DocumentReference;
-  id: string;
-  metadata: SnapshotMetadata;
-  data(): DocumentData;
-  get(fieldPath: string): any;
-}
-```
-
-## Streaming collection data
-
-There are multiple ways of streaming collection data from Firestore. 
-
-### `valueChanges({ idField?: string })`
-
-**What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the document data is included. Optionally, you can pass an options object with an `idField` key containing a string. If provided, the returned JSON objects will include their document ID mapped to a property with the name provided by `idField`.  
-
-**Why would you use it?** - When you just need a list of data. No document metadata is attached to the resulting array which makes it simple to render to a view.
-
-**When would you not use it?** - When you need a more complex data structure than an array.
-
-**Best practices** - Use this method to display data on a page. It's simple but effective. Use `.snapshotChanges()` once your needs become more complex.
-
-#### Example of persisting a Document Id
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
-import { Observable } from 'rxjs';
-
-export interface Item { id: string; name: string; }
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <ul>
-      <li *ngFor="let item of items | async">
-        {{ item.name }}
-      </li>
-    </ul>
-  `
-})
-export class AppComponent {
-  private itemsCollection: AngularFirestoreCollection<Item>;
-  items: Observable<Item[]>;
-  constructor(private readonly afs: AngularFirestore) {
-    this.itemsCollection = afs.collection<Item>('items');
-    this.items = this.itemsCollection.valueChanges({ idField: 'customID' });
-  }
-  addItem(name: string) {
-    // Persist a document id
-    const id = this.afs.createId();
-    const item: Item = { id, name };
-    this.itemsCollection.doc(id).set(item);
-  }
-}
-```
-
-### `snapshotChanges()`
-
-**What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of `DocumentChangeAction[]`. 
-
-**Why would you use it?** - When you need a list of data but also want to keep around metadata. Metadata provides you the underyling `DocumentReference`, document id, and array index of the single document. Having the document's id around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `DocumentChangeAction` is useful for ngrx reducers, form states, and animation states.
-
-**When would you not use it?** - When you need a more complex data structure than an array or if you need to process changes as they occur. This array is synchronized with the remote and local changes in Firestore.
-
-**Best practices** - Use an observable operator to transform your data from `.snapshotChanges()`. Don't return the `DocumentChangeAction[]` to the template. See the example below.
-
-#### Example
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-export interface Shirt { name: string; price: number; }
-export interface ShirtId extends Shirt { id: string; }
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <ul>
-      <li *ngFor="let shirt of shirts | async">
-        {{ shirt.name }} is {{ shirt.price }}
-      </li>
-    </ul>
-  `
-})
-export class AppComponent {
-  private shirtCollection: AngularFirestoreCollection<Shirt>;
-  shirts: Observable<ShirtId[]>;
-  constructor(private readonly afs: AngularFirestore) {
-    this.shirtCollection = afs.collection<Shirt>('shirts');
-    // .snapshotChanges() returns a DocumentChangeAction[], which contains
-    // a lot of information about "what happened" with each change. If you want to
-    // get the data and the id use the map operator.
-    this.shirts = this.shirtCollection.snapshotChanges().pipe(
-      map(actions => actions.map(a => {
-        const data = a.payload.doc.data() as Shirt;
-        const id = a.payload.doc.id;
-        return { id, ...data };
-      }))
-    );
-  }
-}
-```
-
-### `stateChanges()`
-
-**What is it?** - Returns an Observable of the most recent changes as a `DocumentChangeAction[]`. 
-
-**Why would you use it?** - The above methods return a synchronized array sorted in query order. `stateChanges()` emits changes as they occur rather than syncing the query order. This works well for ngrx integrations as you can build your own data structure in your reducer methods.
-
-**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore.
-
-#### Example
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-export interface AccountDeposit { description: string; amount: number; }
-export interface AccountDepositId extends AccountDeposit { id: string; }
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <ul>
-      <li *ngFor="let deposit of deposits | async">
-        {{ deposit.description }} for {{ deposit.amount }}
-      </li>
-    </ul>
-  `
-})
-export class AppComponent {
-  private depositCollection: AngularFirestoreCollection<AccountDeposit>;
-  deposits: Observable<AccountDepositId[]>;
-  constructor(private readonly afs: AngularFirestore) {
-    this.depositCollection = afs.collection<AccountDeposit>('deposits');
-    this.deposits = this.depositCollection.stateChanges(['added']).pipe(
-      map(actions => actions.map(a => {
-        const data = a.payload.doc.data() as AccountDeposit;
-        const id = a.payload.doc.id;
-        return { id, ...data };
-      }))
-    );
-  }
-}
-```
-
-### `auditTrail()`
-
-**What is it?** - Returns an Observable of `DocumentChangeAction[]` as they occur. Similar to `stateChanges()`, but instead it keeps around the trail of events as an array.
-
-**Why would you use it?** - This method is like `stateChanges()` except it is not ephemeral. It collects each change in an array as they occur. This is useful for ngrx integrations where you need to replay the entire state of an application. This also works as a great debugging tool for all applications. You can simply write `afs.collection('items').auditTrail().subscribe(console.log)` and check the events in the console as they occur.
-
-**When would you not use it?** - When you just need a list of data. This is a more advanced usage of AngularFirestore. 
-
-#### Example
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-
-export interface AccountLogItem { description: string; amount: number; }
-export interface AccountLogItemId extends AccountLogItem { id: string; }
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <ul>
-      <li *ngFor="let log of accountLogs | async">
-        {{ log.description }} for {{ log.amount }}
-      </li>
-    </ul>
-  `
-})
-export class AppComponent {
-  private accountLogCollection: AngularFirestoreCollection<AccountLogItem>;
-  accountLogs: Observable<AccountLogItemId[]>;
-  constructor(private readonly afs: AngularFirestore) {
-    this.accountLogCollection = afs.collection<AccountLogItem>('accountLog');
-    this.accountLogs = this.accountLogCollection.auditTrail().pipe(
-      map(actions => actions.map(a => {
-        const data = a.payload.doc.data() as AccountLogItem;
-        const id = a.payload.doc.id;
-        return { id, ...data };
-      }))
-    );
-  }
-}
-```
-
-### Limiting events
-
-There are three `DocumentChangeType`s in Firestore: `added`, `removed`, and `modified`. Each streaming method listens to all three by default. However, you may only be interested in one of these events. You can specify which events you'd like to use through the first parameter of each method:
-
-#### Basic example
-
-```ts
-  constructor(private afs: AngularFirestore): {
-    this.itemsCollection = afs.collection<Item>('items');
-    this.items = this.itemsCollection.snapshotChanges(['added', 'removed']);
-  }
-```
-
-#### Component example
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
-import { Observable } from 'rxjs';
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <ul>
-      <li *ngFor="let item of items | async">
-        {{ item.name }}
-      </li>
-    </ul>
-  `
-})
-export class AppComponent {
-  private itemsCollection: AngularFirestoreCollection<Item>;
-  items: Observable<Item[]>;
-  constructor(private afs: AngularFirestore) {
-    this.itemsCollection = afs.collection<Item>('items');
-    this.items = this.itemsCollection.valueChanges(['added', 'removed']);
-  }
-}
-```
-
-## State based vs. action based
-
-Each one of these methods falls into two categories: state based and action based. State based methods return the state of your collection "as-is". Whereas action based methods return "what happened" in your collection.
-
-For example, a user updates the third item in a list. In a state based method like `.valueChanges()` will update the third item in the collection and return an array of JSON data. This is how your state looks.
-
-## Adding documents to a collection
-
-To add a new document to a collection with a generated id use the `add()` method. This method uses the type provided by the generic class to validate it's type structure.
-
-#### Basic example
-
-```ts
-  constructor(private afs: AngularFirestore): {
-    const shirtsCollection = afs.collection<Item>('tshirts');
-    shirtsCollection.add({ name: 'item', price: 10 });
-  }
-```
-
-## Manipulating individual documents
-
-To retrieve, update, or delete an individual document you can use the `doc()` method. This method returns an `AngularFirestoreDocument`, which provides methods for streaming, updating, and deleting. [See Using Documents with AngularFirestore for more information on how to use documents](documents.md).
-
-### [Next Step: Querying Collections in AngularFirestore](querying-collections.md)

package/docs/compat/firestore/documents.md

@@ -1,115 +0,0 @@
-# 2. Documents in AngularFirestore
-
-> Cloud Firestore is a NoSQL, document-oriented database. Unlike a SQL database, there are no tables or rows. Instead, you store data in *documents*, which are organized into *collections*.
-Each *document* contains a set of key-value pairs. Cloud Firestore is optimized for storing large collections of small documents.
-
-> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
-
-## Using `AngularFirestoreDocument`
-
-The `AngularFirestoreDocument` service is a wrapper around the native Firestore SDK's [`DocumentReference` type](https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference). It is a generic service that provides you with a strongly typed set of methods for manipulating and streaming data. This service is designed for use as an `@Injectable()`.
-
-```ts
-import { Component } from '@angular/core';
-import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
-import { Observable } from 'rxjs';
-
-export interface Item { name: string; }
-
-@Component({
-  selector: 'app-root',
-  template: `
-    <div>
-      {{ (item | async)?.name }}
-    </div>
-  `
-})
-export class AppComponent {
-  private itemDoc: AngularFirestoreDocument<Item>;
-  item: Observable<Item>;
-  constructor(private afs: AngularFirestore) {
-    this.itemDoc = afs.doc<Item>('items/1');
-    this.item = this.itemDoc.valueChanges();
-  }
-  update(item: Item) {
-    this.itemDoc.update(item);
-  }
-}
-```
-
-### The `DocumentChangeAction` type
-
-With the exception of the `valueChanges()`, each streaming method returns an Observable of `DocumentChangeAction[]`.
-
-A `DocumentChangeAction` gives you the `type` and `payload` properties. The `type` tells when what `DocumentChangeType` operation occured (`added`, `modified`, `removed`). The `payload` property is a `DocumentChange` which provides you important metadata about the change and a `doc` property which is the `DocumentSnapshot`.
-
-```ts
-interface DocumentChangeAction {
-  //'added' | 'modified' | 'removed';
-  type: DocumentChangeType;
-  payload: DocumentSnapshot;
-}
-
-interface DocumentChange {
-  type: DocumentChangeType;
-  doc: DocumentSnapshot;
-  oldIndex: number;
-  newIndex: number;
-}
-
-interface DocumentSnapshot {
-  exists: boolean;
-  ref: DocumentReference;
-  id: string;
-  metadata: SnapshotMetadata;
-  data(): DocumentData;
-  get(fieldPath: string): any;
-}
-```
-
-## Streaming document data
-
-There are multiple ways of streaming collection data from Firestore.
-
-### `valueChanges({ idField?: string })`
-
-**What is it?** - Returns an Observable of document data. All Snapshot metadata is stripped. This method provides only the data. Optionally, you can pass an options object with an `idField` key containing a string. If provided, the returned object will include its document ID mapped to a property with the name provided by `idField`.
-
-**Why would you use it?** - When you just need the object data. No document metadata is attached which makes it simple to render to a view.
-
-**When would you not use it?** - When you need document metadata.
-
-### `snapshotChanges()`
-
-**What is it?** - Returns an Observable of data as a `DocumentChangeAction`. 
-
-**Why would you use it?** - When you need the document data but also want to keep around metadata. This metadata provides you the underyling `DocumentReference` and document id. Having the document's id around makes it easier to use data manipulation methods. This method gives you more horsepower with other Angular integrations such as ngrx, forms, and animations due to the `type` property. The `type` property on each `DocumentChangeAction` is useful for ngrx reducers, form states, and animation states.
-
-**When would you not use it?** - When you simply need to render data to a view and don't want to do any extra processing.
-
-## Manipulating documents
-
-AngularFirestore provides methods for setting, updating, and deleting document data.
-
-- `set(data: T)` - Destructively updates a document's data.
-- `update(data: T)` - Non-destructively updates a document's data.
-- `delete()` - Deletes an entire document. Does not delete any nested collections.
-
-## Querying?
-
-Querying has no effect on documents. Documents are a single object and querying effects a range of multiple documents. If you are looking for querying then you want to use a collection.
-
-## Retrieving nested collections
-
-Nesting collections is a great way to structure your data. This allows you to group related data structures together. If you are creating a "Task List" site, you can group "tasks" under a user: `user/<uid>/tasks`. 
-
-To retrieve a nested collection use the `collection(path: string)` method.
-
-```ts
-  constructor(private afs: AngularFirestore) {
-    this.userDoc = afs.doc<Item>('user/david');
-    this.tasks = this.userDoc.collection<Task>('tasks').valueChanges();
-  }
-```
-
-### [Next Step: Collections in AngularFirestore](collections.md)

package/docs/compat/firestore/offline-data.md

@@ -1,39 +0,0 @@
-# Offline Data in Firestore
-
-> Cloud Firestore supports offline data persistence. This feature caches a copy of the Cloud Firestore data that your app is actively using, so your app can access the data when the device is offline. You can write, read, listen to, and query the cached data. When the device comes back online, Cloud Firestore synchronizes any local changes made by your app to the data stored remotely in Cloud Firestore.
-
-> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
-
-**Offline persistence is an experimental feature that is supported only by the Chrome, Safari, and Firefox web browsers.** If a user opens multiple browser tabs that point to the same Cloud Firestore database, and offline persistence is enabled, Cloud Firestore will work correctly only in the first tab.
-
-## Enable Offline Data in AngularFirestore
-
-To enable offline persistence in your AngularFire application, call `enablePersistence()` when you are importing `AngularFirestoreModule` into your `@NgModule`:
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { AppComponent } from './app.component';
-import { AngularFireModule } from '@angular/fire/compat';
-import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
-import { AngularFireAuthModule } from '@angular/fire/compat/auth';
-import { environment } from '../environments/environment';
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    AngularFireModule.initializeApp(environment.firebase),
-    AngularFirestoreModule.enablePersistence(),
-  ],
-  declarations: [ AppComponent ],
-  bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-
-```
-
-While offline your listeners will receive listen events when the locally cached data changes. You can use to Documents and Collections normally.
-
-To check whether you're receiving data from the server or the cache, use the `fromCache` property on the `SnapshotMetadata` in your snapshot event. If `fromCache` is true, the data came from the cache and might be stale or incomplete. If `fromCache` is false, the data is complete and current with the latest updates on the server.
-
-[To learn more about Offline Persistence in Firestore, check out the Firebase documentation](https://firebase.google.com/docs/firestore/enable-offline).