@angular/fire 7.6.1 → 16.0.0-canary.4172abd

package/docs/universal/prerendering.md

@@ -1,72 +0,0 @@
-# Prerendering your Universal application
-
-Prerendering a Universal application allows us to generate the HTML before the user requests it; increasing performance and decreasing cost. Let's configure your application to prerender and staticly serve it's most commonly accessed routes on Firebase Hosting.
-
-First create a `static.paths.js` in your project root, which lists the URLs you'd want to prerender:
-
-```js
-export default [
-    '/',
-    '/another_path',
-    '/yet_another_path'
-];
-```
-
-Let's install `mkdir-recursive` to make the next step a little easier:
-
-```bash
-npm i --save-dev mkdir-recursive
-```
-
-Now replace the listener in your `server.ts` with the following:
-
-```ts
-import { readFileSync, writeFileSync, existsSync } from 'fs';
-import { renderModuleFactory } from '@angular/platform-server';
-import { mkdirSync } from 'mkdir-recursive';
-
-if (process.env.PRERENDER) {
-
-    const routes = require('./static.paths').default;
-    Promise.all(
-        routes.map(route =>
-            renderModuleFactory(AppServerModuleNgFactory, {
-                document: template,
-                url: route,
-                extraProviders: [
-                    provideModuleMap(LAZY_MODULE_MAP)
-                ]
-            }).then(html => [route, html])
-        )
-    ).then(results => {
-        results.forEach(([route, html]) => {
-            const fullPath = join('./public', route);
-            if (!existsSync(fullPath)) { mkdirSync(fullPath); }
-            writeFileSync(join(fullPath, 'index.html'), html);
-        });
-        process.exit();
-    });
-
-} else if (!process.env.FUNCTION_NAME) {
-
-    // If we're not in the Cloud Functions environment, spin up a Node server
-    const PORT = process.env.PORT || 4000;
-    app.listen(PORT, () => {
-        console.log(`Node server listening on http://localhost:${PORT}`);
-    });
-}
-```
-
-Now if the `PRERENDER` environment variable is passed any value, instead of serving your application it will iterate over the paths in `static.paths.js`, render them, and write them to your `public` directory.  *You could always make this a seperate script.*
-
-Finally make some modifications to your `package.json`, to prerender your content when you build:
-
-```js
-"scripts": {
-  // ... omitted
-  "build": "ng build && npm run copy:hosting && npm run build:functions && npm run prerender:ssr",
-  "prerender:ssr": "PRERENDER=1 node dist/YOUR_PROJECT_NAME-webpack/server.js",
-},
-```
-
-Now when you run `npm run build` the prerendered content should be available in your `/public` directory, ready for deployment on Firebase Hosting.

package/docs/version-4-upgrade.md

@@ -1,119 +0,0 @@
-# Upgrading to AngularFire2 4.0
-
-AngularFire2 4.0 is a refactor of the AngularFire2 package which implements
-@NgModule, simplifies authentication, and better supports Angular 4.
-
-### Removing `AngularFire` for Modularity
-
-Prior to 4.0, AngularFire2 did not take advantage of the Firebase SDK's modularity for tree shaking. The `AngularFire` service has now been removed and the library is broken up into smaller `@NgModule`s:
-
-* `AngularFireModule`
-* `AngularFireDatabaseModule`
-* `AngularFireAuthModule`
-
-When upgrading, replace calls to `AngularFire.database` and `AngularFire.auth` with `AngularFireDatabase` and `AngularFireAuth` respectively.
-
-```typescript
-constructor(af: AngularFire) {
-  af.database.list('foo');
-  af.auth;
-}
-```
-Should now be:
-
-```typescript
-constructor(db: AngularFireDatabase, afAuth: AngularFireAuth) {
-  db.list('foo');
-  afAuth.authState;
-}
-```
-
-### Simplified Authentication API
-
-In 4.0 we've reduced the complexity of the auth module by providing only [`firebase.User`](https://firebase.google.com/docs/reference/js/firebase.User) observers (`AngularFireAuth.authState`, `AngularFireAuth.idToken`) and cutting the methods that were wrapping the Firebase SDK.
-
-
-```typescript
-import { AngularFireAuth } from 'angularfire2/auth';
-// Do not import from 'firebase' as you'd lose the tree shaking benefits
-import firebase from 'firebase/app';
-...
-
-user: Observable<firebase.User>;
-constructor(afAuth: AngularFireAuth) {
-  this.user = afAuth.authState; // only triggered on sign-in/out (for old behavior use .idToken)
-}
-```
-
-AngularFire2 exposes the raw Firebase Auth object via `AngularFireAuth.auth`. For actions like login, logout, user creation, etc. you should use the [methods available to `firebase.auth.Auth`](https://firebase.google.com/docs/reference/js/firebase.auth.Auth).
-
-While convenient, the pre-configured login feature added unneeded complexity. `AngularFireModule.initializeApp` no longer takes a default sign in method. Sign in should be done with the Firebase SDK via `firebase.auth.Auth`:
-
-```typescript
-login() {
-  this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
-}
-logout() {
-  this.afAuth.auth.signOut();
-}
-```
-
-### FirebaseListFactory and FirebaseObjectFactory API Changes
-
-If you directly use `FirebaseListFactory` or `FirebaseObjectFactory` you will no longer be able to pass in a string, it will instead expect a Firebase database reference.
-
-## Putting this all together
-
-Here's an example of what AngularFire2 4.0 looks like:
-
-```typescript
-import { NgModule, Component } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { AngularFireModule } from 'angularfire2';
-import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
-import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
-import { environment } from '../environments/environment';
-
-// Do not import from 'firebase' as you'd lose the tree shaking benefits
-import firebase from 'firebase/app';
-
-
-@NgModule({
-  declarations: [ App ],
-  exports: [ App ],
-  imports: [ 
-    AngularFireModule.initializeApp(environment.firebase, 'my-app'),
-    AngularFireDatabaseModule,
-    AngularFireAuthModule
-  ],
-  bootstrap: [ App ]
-})
-export class MyModule { }
-
-```
-
-```typescript
-@Component({
-  selector: 'my-app',
-  template: `
-    <div> {{ (items | async)? | json }} </div>
-    <div> {{ (user | async)? | json }} </div>
-    <button (click)="login()">Login</button>
-    <button (click)="logout()">Logout</button>
-  `
-})
-export class App {
-  user: Observable<firebase.User>;
-  items: FirebaseListObservable<any[]>;
-  constructor(afAuth: AngularFireAuth, db: AngularFireDatabase) {
-    this.user = afAuth.authState;
-    this.items = db.list('items');
-  }
-  login() {
-    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
-  }
-  logout() {
-     this.afAuth.auth.signOut();
-  }
-}
-```

package/docs/version-5-upgrade.md

@@ -1,82 +0,0 @@
-# Upgrading to AngularFire 5.0
-
-AngularFire 5.0 is a refactor of the `AngularFireDatabase` module. It removes the `FirebaseListObservable` and `FirebaseObjectObservable` in favor of a generic based service API.
-
-## Updating `FirebaseListObservable` to `AngularFireList<T>`
-
-Rather than `.list()` returning a `FirebaseListObservable`, it now returns an `AngularFireList<T>`. This service contains methods that allow you to manipulate and stream data.
-
-In the case of streaming back data, you now call one of the observable methods on `AngularFireList`.
-
-### 4.0
-
-```ts
-constructor(afDb: AngularFireDatabase) {
-  afDb.list('items').subscribe(console.log);
-}
-```
-
-### 5.0
-
-```ts
-constructor(afDb: AngularFireDatabase) {
-  afDb.list<Item>('items').valueChanges().subscribe(console.log);
-}
-```
-
-The same concepts apply to `FirebaseObjectObservable` to `AngularFireObject`.
-
-## Moving away from `$key` and `$value`
-
-In AngularFireDatabase 4.0 the snapshot was automatically unwrapped for you and metadata was placed in `$` property. The Firebase Database rejects any keys with `$` in them so this mechanism allowed us to provide you with important metadata alongside your actual data. However, persisting the object could be a pain in some cases as the SDK would reject any `$` based properties. In 5.0 we have moved away from `$` properties and we provide multiple observable methods for receiving the data.
-
-Calling `.valueChanges()` returns an Observable without any metadata. If you are already persisting the key as a property then you are fine. However, if you are relying on `$key`, then you need to use `.snapshotChanges()` and transform the data with an observable `.map()`.
-
-### 4.0
-
-```ts
-constructor(afDb: AngularFireDatabase) {
-  afDb.list('items').subscribe(items => { 
-    const allKeys = items.map(item => item.$key);
-  });
-}
-```
-
-### 5.0
-
-```ts
-constructor(afDb: AngularFireDatabase) {
-  afDb.list('items').snapshotChanges().pipe(
-    map(actions => 
-      actions.map(a => ({ key: a.key, ...a.payload.val() }))
-    )
-  ).subscribe(items => {
-    return items.map(item => item.key);
-  });
-}
-```
-
-## Data manipulation methods
-
-AngularFire 5.0 removes all custom observables which means their custom operators are gone as well. Instead of using custom operators on either a `FirebaseListObservable` or a `FirebaseObjectObservable`, use the methods on the service based APIs: `AngularFireList` and `AngularFireObject`. There is no resulting code change, but it worth pointing out.
-
-### 4.0
-
-```ts
-constructor(afDb: AngularFireDatabase) {
-  const listObservable = afDb.list('items');
-  listObservable.push({ name: 'item' });
-  listObservable.subscribe();
-}
-```
-
-### 5.0
-
-```ts
-constructor(afDb: AngularFireDatabase) {
-  const afList = afDb.list('items');
-  afList.push({ name: 'item' });
-  const listObservable = afList.snapshotChanges();
-  listObservable.subscribe();
-}
-```

package/docs/version-6-upgrade.md

@@ -1,16 +0,0 @@
-# Upgrading to AngularFire 6.0
-
-Intended to be run with Angular 9; version 6 of AngularFire drops support for Angular version 8 and below, older versions of typescript, Firebase, drops `firebase-node`, `database-deprecated`, and more.
-
-## Breaking changes:
-
-* Support for Angular versions less than 9 has been dropped
-* Support for Firebase JS SDK versions less than 7.13.1 has been dropped
-* Support for `firebase-tools` less than 8.0 has been dropped
-* The `angularfire2` NPM library will no longer be updated
-* Dropped `@angular/fire/firebase-node` and `@angular/fire/database-depreciated`
-* We make use of Proxy in more modules, you'll need to polyfill if you want to support IE 11
-* We've standardized our DI Token naming conventions across all modules
-* `AngularFireAuth` has dropped the `auth` property and instead Promise Proxies the underlying Firebase `auth.Auth` instance; allowing your development experience to more closely mirror the JS SDK. Similar changes have been made to `AngularFireFunctions`, `AngularFireMessaging`, and `AngularFirePerformance`.
-* `AngularFireAuthGuard` and `canActivate` have dropped support for raw pipes, this was never working correctly in AOT
-* `AngularFirePerformance` has been simplified, the RXJS pipes are now exported as pure-functions outside the class. Automatic tracking of `isStable` timing has now been moved into `PerformanceMonitoringService` and we've dropped the `AUTOMATICALLY_TRACE_CORE_NG_METRICS` DI token.

package/docs/version-7-upgrade.md

@@ -1,298 +0,0 @@
-# Upgrading to AngularFire 7.0
-
-Intended to be run with Angular 12, AngularFire 7.0 allows you to take full advantage of the new tree-shakable Firebase JS SDK (v9) while also providing a compatible experience with the prior API.
-
-`ng update @angular/fire`
-
-## 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)
-* **compat/auth:** `USE_EMULATOR` DI token is now in the form of `['http://localhost:9099']`
-
-## Compatibility mode
-
-AngularFire v7.0 has a compatibility layer that supports the AngularFire v6.0 API. Just change your imports from `@angular/fire/*` to `@angular/fire/compat/*` and `firebase/*` to `firebase/compat/*`.
-
-While not as tree-shakable as the new modular SDK, this allows you to upgrade and take advantage of the benefits of the new SDK ASAP.
-
-**Most developers can stop here for now as the new API isn't feature complete.**
-
-## **NEW** Modular SDK
-
-### Initialization
-
-In order to better support the tree-shakability introduced in Firebase v9 & to reduce the maintence required when the JS SDK adds new configuration flags, AngularFire providers now take a factory for a fully instantiated instance of the SDK you'd like to inject.
-
-**Before:**
-```ts
-@NgModule({
-    imports: [
-        AngularFireModule.initializeApp(config),
-        AngularFirestoreModule.enablePersistence(),
-        AngularFireStorageModule,
-    ],
-    providers: [
-        { provide: USE_EMULATOR, useValue: ['localhost', 8080] },
-    ],
-})
-```
-
-**Modular SDK:**
-```ts
-@NgModule({
-    imports: [
-        provideFirebaseApp(() => initializeApp(config)),
-        provideFirestore(() => {
-            const firestore = getFirestore();
-            connectFirestoreEmulator(firestore, 'localhost', 8080);
-            enableIndexedDbPersistence(firestore);
-            return firestore;
-        }),
-        provideStorage(() => getStorage()),
-    ],
-})
-```
-
-### Injecting services
-
-Before when you injected Firebase JS SDK services into AngularFire they would be lazy-loaded and a promise-proxy would be returned to you. In AngularFire v7 you get the intiated service directly. We no longer lazy load for you.
-
-```ts
-import { Firestore, doc, onSnapshot, DocumentReference, docSnapshots } from '@angular/fire/firestore';
-
-@Component({})
-export class Foo {
-    doc: DocumentReference;
-    constructor(
-        firestore: Firestore, // Injects the instantiated Firestore instance
-    ) {
-        // You can directly operate on the instance with JS SDK methods which we've
-        // reexported in AngularFire
-        this.doc = doc(firestore, 'foo/1');
-        onSnapshot(doc, snap => {
-            // ...
-        });
-        // or use the convenience observables
-        docSnapshots(doc).subscribe(...);
-    }
-    async update() {
-        await updateDoc(this.doc, { ... });
-        ...
-    }
-}
-```
-
-### Working with multiple apps / instances
-
-In AngularFire v7 working with multiple instances was difficult, in the new SDK we have new DI tokens that make working with them much more straight forward.
-
-```ts
-@NgModule({
-    imports: [
-        provideFirebaseApp(() => initializeApp(config)),
-        provideFirebaseApp(() => initializeApp(config2, 'anotherApp')),
-        provideStorage(() => getStorage()),
-        provideStorage(() => getStorage(getApp(), 'anotherBucket')),
-        provideStorage(() => getStorage(getApp('anotherApp'))),
-    ],
-})
-```
-
-```ts
-import { FirebaseApp, FirebaseApps } from '@angular/fire/app';
-import { Storage, StorageInstances } from '@angular/fire/storage';
-
-export class Foo {
-    constructor(
-        defaultApp: FirebaseApp,       // Injects the default FirebaseApp
-        allFirebaseApps: FirebaseApps, // Injects an array of all initialized Firebase Apps
-        storage: Storage,                      // Injects the default storage instance
-        allStorageInstances: StorageInstances, // Injects an array of all the intialized storage instances
-    ) { }
-}
-```
-How the main injection tokens (i.e, `FirebaseApp`, `Storage`) function have changed from v7 but it should provide a much more powerful and intuitive API.
-
-### API
-
-Beyond Depdency Injection AngularFire is sporting an entirely new API:
-
-1) We no longer handle lazy-loading the Firebase JS SDK modules for you
-1) We no longer provide classes beyond Depedency Injection
-1) No more Proxy / Promise-Proxy
-1) We reexport and Zone-wrap all Firebase and RxFire APIs
-
-So developing with the new AngularFire is easy, you can use it just like the vanilla Firebase JS SDK. Just change all your `firebase/app` imports to `@angular/fire/app`, `firebase/firestore` to `@angular/fire/firestore`, `firebase/database` to `@angular/fire/database`, etc. Then if you're feeling comfortable with RXJS and would like to use some of our convenience operators you can just dip into that toolbox.
-
-#### Alternatives to v6 APIs
-
-<table>
-    <thead>
-        <tr>
-            <th colspan="2">v6 / Compat</th>
-            <th>v7 Modular</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <th rowspan="3">AngularFirestore</th>
-            <td>doc</td>
-            <td>
-
-```ts
-import { doc } from '@angular/fire/firestore';
-doc<T>(firestore, 'foo/bar') // DocumentReference<T>
-```
-</td>
-        </tr>
-        <tr>
-            <td>collection</td>
-            <td>
-
-```ts
-import { collection } from '@angular/fire/firestore';
-collection<T>(firestore, 'foo') // CollectionReference<T>
-```
-</td>
-        </tr>
-        <tr>
-            <td>collectionGroup</td>
-            <td>
-
-```ts
-import { collectionGroup } from '@angular/fire/firestore';
-collectionGroup<T>(firestore, 'foo') // Query<T>
-```
-</td>
-        </tr>
-        <tr>
-            <th rowspan="7">AngularFirestoreDocument</th>
-            <td>set</td>
-            <td>
-
-```ts
-import { setDoc } from '@angular/fire/firestore';
-setDoc(docRef, { ... }) // Promise<void>
-```
-</td>
-
-</td>
-        </tr>
-        <tr>
-            <td>update</td>
-            <td>
-
-```ts
-import { updateDoc } from '@angular/fire/firestore';
-updateDoc(docRef, { ... }) // Promise<void>
-```
-</td>
-        </tr>
-        <tr>
-            <td>delete</td>
-            <td>
-
-```ts
-import { deleteDoc } from '@angular/fire/firestore';
-deleteDoc(docRef) // Promise<void>
-```
-</td>
-        </tr>
-        <tr>
-            <td>collection</td>
-            <td>
-
-```ts
-import { collection } from '@angular/fire/firestore';
-collection<T>(docRef, 'bar') // CollectionReference<T>
-```
-</td>
-        </tr>
-        <tr>
-            <td>snapshotChanges</td>
-            <td>
-
-```ts
-import { docSnapshots } from '@angular/fire/firestore';
-docSnapshots<T>(docRef) // Observable<DocumentSnapshot<T>>
-```
-</td>
-
-</td>
-        </tr>
-        <tr>
-            <td>valueChanges</td>
-            <td>
-
-```ts
-import { docData } from '@angular/fire/firestore';
-docData<T>(docRef) // Observable<T>
-```
-</td>
-        </tr>
-        <tr>
-            <td>get</td>
-            <td>
-
-```ts
-import { getDoc } from '@angular/fire/firestore';
-getDoc<T>(docRef) // Promise<DocumentSnapshot<T>>
-```
-
-</td>
-        </tr>
-    </tbody>
-</table>
-
-### Code splitting and lazy-loading
-
-AngularFire does not lazy-load services any longer. We have provided a helper observable for detecting when a new service instance is instantiated. In this example we'll code split out of all the Firestore related code and lazy-load
-
-```ts
-// firestore_operations.ts
-import {
-    collectionData,
-    firestoreInstance$,
-    collection,
-    getFirestore
-} from '@angular/fire/firestore';
-import { first } from 'rxjs/operators';
-import { IFoo } from '../interfaces';
-
-export { getFirestore };
-
-export const fooData = firestoreInstance$.pipe(
-    first(),
-    concatMap(firestore => collectionData<IFoo>(collection(firestore, 'foo'))),
-);
-```
-
-```ts
-export class AuthService {
-    constructor() {
-        getRedirectResult().then(result => {
-            // Initialize Firestore only after a user logs in
-            if (result.user) {
-                const { getFirestore } = await import('./firestore_operations');
-                getFirestore();
-            }
-        });
-    }
-}
-```
-
-```ts
-@Component({})
-export class Foo {
-    data: Observable<IFoo[]>;
-    constructor() {
-        this.data = of(undefined).pipe(
-            concatMap(() => import('./firestore_operations')),
-            concatMap(it => it.fooData)
-        );
-    }
-}
-```