@angular/fire 17.0.1 → 17.1.0-canary.58e6c3b

package/docs/firestore.md

@@ -1,7 +1,7 @@
 <img align="right" width="30%" src="images/firestore-illo_1x.png">
 
 <small>
-<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Cloud Firestore
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Cloud Firestore
 </small>
 
 # Cloud Firestore
@@ -18,47 +18,45 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ```bash
 ng add @angular/fire
 ```
-Provide a Firestore instance in the application's `NgModule` (`app.module.ts`):
+Provide a Firestore instance in the application's `app.config.ts`:
 
-```typescript
-@NgModule({
-  declarations: [
-    ...
-  ],
-  imports: [
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideFirestore, getFirestore } from '@angular/fire/firestore';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
+    provideFirestore(() => getFirestore()),
     ...
-    // App initialization
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
-    provideFirestore(() => getFirestore())
   ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+  ...
+}
 ```
 
-
-In your component class, for example `user-profile.component.ts` import and inject `Firestore`:
+Next inject `Firestore` into your component:
 
 ```typescript
 import { Component, inject } from '@angular/core';
 import { Firestore } from '@angular/fire/firestore';
 
-@Component({
-    standalone: true,
-    selector: 'app-user-profile',
-    ...
-})
+@Component({ ... })
 export class UserProfileComponent {
-    private firestore: Firestore = inject(Firestore);
+    private firestore = inject(Firestore);
     ...
 }
 ```
 
 ## Firebase API
-With the reference to Cloud Firestore available in a component it is now possible to connect read from and write to the database.
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/firestore'` to `import { ... } from '@angular/fire/firestore'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/firestore/quickstart#web-modular-api) | [API Reference](https://firebase.google.com/docs/reference/js/firestore)
 
 ### Reading data
+
 In Cloud Firestore data is stored in `documents` and `documents` are stored in `collections`. The path to data follows `<collection_name>/<document_id>` and continues if there are subcollections. For example, `"users/ABC12345/posts/XYZ6789"` represents:
 * `users` collection
 * document id `ABC12345`
@@ -111,6 +109,7 @@ export Interface UserProfile {
 The `async` pipe handles unsubscribing from observables.
 
 ### Writing data
+
 To write to Cloud Firestore use the `addDoc` function. It will create a new document at the path specified by the collection. In `user-profile.component.ts`, we'll update the code to add a new document on a `<button>` click.
 
 

package/docs/functions.md

@@ -1,7 +1,7 @@
 <img align="right" width="30%" src="images/functions-illo_1x.png">
 
 <small>
-<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Cloud Functions
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Cloud Functions
 </small>
 
 # Cloud Functions
@@ -17,21 +17,23 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ng add @angular/fire
 ```
 
-Provide a Cloud Functions instance in the application's `NgModule` (`app.module.ts`):
+Provide a Cloud Functions instance in the application's `app.config.ts`:
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { getFunctions, provideFunctions } from '@angular/fire/functions';
+import { provideFunctions, getFunctions } from '@angular/fire/functions';
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideFunctions(() => getFunctions()),
-  ]
+    ...
+  ],
+  ...
 })
 ```
 
-Next inject it into your component:
+Next inject `Functions` into your component:
 
 ```ts
 import { Component, inject} from '@angular/core';
@@ -39,14 +41,15 @@ import { Functions } from '@angular/fire/functions';
 
 @Component({ ... })
 export class AppComponent {
-  private functions: Functions = inject(Functions);
+  private functions = inject(Functions);
   ...
 }
 ```
 
 ## Firebase API
-The [Firebase API for Cloud Functions documentation](https://firebase.google.com/docs/reference/js/functions) is available on the Firebase website.
 
-## Convenience observables
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/functions'` to `import { ... } from '@angular/fire/functions'` and follow the official documentation.
 
-More details coming soon.
+[Call functions from your app](https://firebase.google.com/docs/functions/callable?gen=2nd#web-modular-api) | [API Reference](https://firebase.google.com/docs/reference/js/functions)

package/docs/install-and-setup.md

@@ -73,7 +73,7 @@ import { Observable } from 'rxjs';
   styleUrls: ['app.component.css']
 })
 export class AppComponent {
-  firestore: Firestore = inject(Firestore)
+  firestore: Firestore = inject(Firestore);
   items$: Observable<any[]>;
 
   constructor() {

package/docs/messaging.md

@@ -1,25 +1,225 @@
 <img align="right" width="30%" src="images/cloud-messaging-illo_1x.png">
 
 <small>
-<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Cloud Messaging
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Cloud Messaging
 </small>
 
 # Cloud Messaging
 
-The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.
-
-[Learn More](https://firebase.google.com/docs/cloud-messaging/)
+Firebase FCM allows you to register devices with unique FCM tokens, that you can later programtically send notifications to using Firebase Cloud Functions. It is up to the application to update these tokens in Firebase if you want to use them in other layers of your application, i.e send a notification to all administrators, etc. In that case, you would likely want to store your fcm tokens on your user collection, or a sub collection or another collection with different permissions.
 
 ## Dependency Injection
 
-YADA YADA YADA
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Cloud Messaging instance in the application's `app.config.ts`:
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideMessaging, getMessaging } from '@angular/fire/messaging';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
+    provideMessaging(() => getMessaging()),
+    ...
+  ],
+  ...
+})
+```
+
+Next inject `Messaging` into your component:
+
+```ts
+import { Component, inject} from '@angular/core';
+import { Messaging } from '@angular/fire/messaging';
+
+@Component({ ... })
+export class AppComponent {
+  private messaging = inject(Messaging);
+  ...
+}
+```
+
+# Create a Firebase Messaging Service Worker 
+
+There are two parts to Firebase Messaging, a Service Worker and the DOM API. Angular Fire Messaging allows you to request permission, get tokens, delete tokens, and subscribe to messages on the DOM side. To register to receive notifications you need to set up the Service Worker. [The official Firebase documentation for setting up the details exactly how to do that](https://firebase.google.com/docs/cloud-messaging/js/client).
+
+#### Create your firebase-messaging-sw.js file in your src/assets folder
+
+*Note: When copying the below file, make sure your firebase version in your installation matches the version your are importing from below*
+
+It may be wise to use file replacements or environments here for different environments
+
+```
+// This sample application is using 9.22, make sure you are importing the same version
+
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
+import { getMessaging } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-messaging-sw.js";
+
+const firebaseApp = initializeApp({
+  apiKey: "",
+  authDomain: "",
+  projectId: "",
+  storageBucket: "",
+  messagingSenderId: "",
+  appId: "",
+});
+
+const messaging = getMessaging(firebaseApp);
+```
+
+# Example messaging service
+
+```
+import { Injectable } from "@angular/core";
+import { Messaging, getToken, onMessage, deleteToken } from "@angular/fire/messaging";
+import { Observable, tap } from "rxjs";
+
+@Injectable({
+  providedIn: "root",
+})
+export class FcmService {
+  constructor(private msg: Messaging){
+    Notification.requestPermission().then(
+    (notificationPermissions: NotificationPermission) => {
+      if (notificationPermissions === "granted") {
+        console.log("Granted");
+      }
+      if (notificationPermissions === "denied") {
+        console.log("Denied");
+      }
+    });
+    navigator.serviceWorker
+      .register("/assets/firebase-messaging-sw.js", {
+        type: "module",
+      })
+      .then((serviceWorkerRegistration) => {
+        getToken(this.msg, {
+          vapidKey: `an optional key generated on Firebase for your fcm tokens`,
+          serviceWorkerRegistration: serviceWorkerRegistration,
+        }).then((x) => {
+          console.log('my fcm token', x);
+          // This is a good place to then store it on your database for each user
+        });
+	});  
+    }
+    this.message$ = new Observable((sub) => onMessage(this.msg, (msg) =>     
+      sub.next(msg))).pipe(
+	    tap((msg) => {
+	      console.log("My Firebase Cloud Message", msg);
+	    })
+    );
+    }
+  deleteToken(){
+    // We can also delete fcm tokens, make sure to also update this on your firestore db if you are storing them as well
+    await deleteToken(this.msg);
+  }
+```
+
+# Testing and Sending Notifications
+
+Firebase will allow you to send a test notification under Engage > Messaging > New Campaign > Notifications. Here you can click send a test message. Additionally, you can send them programmatically through Firebase cloud functions. 
+
+Here is a barebones Node example:
+
+```
+export const sendTestMessage = onRequest(async (_, res) => {
+  try {
+    const message = {
+      notification: {
+        title: "Test Title",
+        body: "Test Body",
+      },
+      token: "your token here, you can store these and retreive as you please",
+    };
+    await admin.messaging().send(message);
+    res.sendStatus(200);
+  } catch (error) {
+    console.error(error);
+    res.sendStatus(500);
+  }
+});
+```
+
+Here is a Node example that listens for a new comment on a collection, then sends a notification, and also adds it to a cache on Firebase so users can click through them.
+
+```
+exports.onPostReply =
+  onDocumentCreated("comments/{commentId}", async (event) => {
+    if (!event) throw new Error("No event found for document creation");
+    const snapshot = event.data;
+    if (!snapshot) {
+      throw new Error("No data associated with the event");
+    }
+    const data = snapshot.data();
+    if (!data.postId) {
+      throw new Error("No post ID found");
+    }
+    const postRef = await firestore.collection("posts").doc(data.postId).get();
+    const postData = postRef.data();
+    if (!postData) {
+      throw new Error("No postData found");
+    }
+    // userUid will be the post author's id.
+    const {userUid} = postData;
+    if (!userUid) {
+      throw new Error(
+        "Could not find the userUid for the post author for post reply"
+      );
+    }
+    const messageForNotification = {
+      title: "You have a new reply on your post",
+      body: "",
+    };
+    await createNotificationAndCache(messageForNotification, userUid);
+  });
+
+  // If you want to cache notifications a number of times, abstracting this
+  // to a function can bring a lot of value.
+  
+interface NotificationProps {
+  title: string;
+  body: string;
+}
 
-## Firebase API
+async function createNotificationAndCache(
+  notificationProps: NotificationProps, userAuthUid: string) {
+  const userRef = await firestore.collection("users").where("authUid", "==",
+    userAuthUid).get();
+  const userData = userRef.docs[0].data();
 
-Something something look at the offical docs
+  const promises: Promise<any>[] = [];
+  // This sample application has seperate fcm tokens for web and mobile
+  if (userData.mobileToken) {
+    const message = {
+      notification: notificationProps,
+      token: userData.mobileToken,
+    };
+    const promise = admin.messaging().send(message);
+    promises.push(promise);
+  }
+  if (userData.webToken) {
+    const message = {
+      notification: notificationProps,
+      token: userData.webToken,
+    };
+    const promise = admin.messaging().send(message);
+    promises.push(promise);
+  }
 
-## Convenience observables
+  const notificationCacheValue = {
+    userAuthUid: userAuthUid,
+    tokenTitle: notificationProps.title,
+    tokenBody: notificationProps.body,
+    isActive: true, // This determines whether a notification has been seen
+  };
 
-### Foo
+  promises.push(
+    firestore.collection("notificationCache").add(notificationCacheValue));
 
-bar baz
+  await Promise.all(promises);
+}  ```

package/docs/performance.md

@@ -1,7 +1,7 @@
 <img align="right" width="30%" src="images/performance-illo_1x.png">
 
 <small>
-<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Performance Monitoring
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Performance Monitoring
 </small>
 
 # Performance Monitoring
@@ -17,21 +17,23 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ng add @angular/fire
 ```
 
-Provide a Performance instance and configuration in the application's `NgModule` (`app.module.ts`):
+Provide a Performance instance in the application's `app.config.ts`:
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { getPerformance, providePerformance} from '@angular/fire/performance';
+import { providePerformance, getPerformance } from '@angular/fire/performance';
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     providePerformance(() => getPerformance()),
-  ]
+    ...
+  ],
+  ...
 })
 ```
 
-Next inject it into your component:
+Next inject `Performance` into your component:
 
 ```ts
 import { Component, inject} from '@angular/core';
@@ -39,19 +41,15 @@ import { Performance } from '@angular/fire/performance';
 
 @Component({ ... })
 export class PerformanceComponent {
-  private performance: Performance = inject(Performance);
+  private performance = inject(Performance);
   ...
 }
 ```
 
 ## Firebase API
 
-The [Performance documentation](https://firebase.google.com/docs/reference/js/performance.md#performance_package) is available on the Firebase website.
-
-## Services
-
-Coming soon.
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
 
-## Convenience observables
+Update the imports from `import { ... } from 'firebase/performance'` to `import { ... } from '@angular/fire/performance'` and follow the official documentation.
 
-Coming soon.
+[Getting Started](https://firebase.google.com/docs/perf-mon/get-started-web) | [API Reference](https://firebase.google.com/docs/reference/js/performance)

package/docs/remote-config.md

@@ -1,7 +1,7 @@
 <img align="right" width="30%" src="images/remote-config-illo_1x.png">
 
 <small>
-<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Remote Config
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Remote Config
 </small>
 
 # Remote Config
@@ -17,21 +17,23 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ng add @angular/fire
 ```
 
-Provide a Performance instance and configuration in the application's `NgModule` (`app.module.ts`):
+Provide a Remote Config instance in the application's `app.config.ts`:
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { getRemoteConfig, provideRemoteConfig} from '@angular/fire/remote-config';
+import { provideRemoteConfig, getRemoteConfig } from '@angular/fire/remote-config';
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideRemoteConfig(() => getRemoteConfig()),
-  ]
+    ...
+  ],
+  ...
 })
 ```
 
-Next inject it into your component:
+Next inject `RemoteConfig` into your component:
 
 ```ts
 import { Component, inject} from '@angular/core';
@@ -39,15 +41,15 @@ import { RemoteConfig } from '@angular/fire/remote-config';
 
 @Component({ ... })
 export class RemoteConfigComponent {
-  private remoteConfig: RemoteConfig = inject(RemoteConfig);
+  private remoteConfig = inject(RemoteConfig);
   ...
 }
 ```
 
 ## Firebase API
 
-The [Remote Config documentation](https://firebase.google.com/docs/reference/js/remote-config) is available on the Firebase website.
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
 
-## Convenience observables
+Update the imports from `import { ... } from 'firebase/remote-config'` to `import { ... } from '@angular/fire/remote-config'` and follow the official documentation.
 
-Coming soon.
+[Getting Started](https://firebase.google.com/docs/remote-config/get-started?platform=web) | [API Reference](https://firebase.google.com/docs/reference/js/remote-config)

package/docs/storage.md

@@ -1,7 +1,7 @@
 <img align="right" width="30%" src="images/storage-illo_1x.png">
 
 <small>
-<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime Cloud Storage
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Cloud Storage
 </small>
 
 # Cloud Storage
@@ -19,21 +19,23 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ng add @angular/fire
 ```
 
-Provide a Firebase Storage instance in the application's `NgModule` (`app.module.ts`):
+Provide a Cloud Storage instance in the application's `app.config.ts`:
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { getStorage, provideStorage } from '@angular/fire/storage';
+import { provideStorage, getStorage } from '@angular/fire/storage';
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideStorage(() => getStorage()),
-  ]
+    ...
+  ],
+  ...
 })
 ```
 
-Next inject it into your component:
+Next inject `Storage` into your component:
 
 ```ts
 import { Component, inject} from '@angular/core';
@@ -41,17 +43,16 @@ import { Storage } from '@angular/fire/storage';
 
 @Component({ ... })
 export class StorageComponent {
-  private storage: Storage = inject(Storage);
+  private storage = inject(Storage);
   ...
 }
 ```
 
-
 ## Firebase API
 
 AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
 
-Update the imports from `import { ... } from 'firebase/storage'` to `import { ... } from '@angular/fire/storage'` and follow the offical documentation.
+Update the imports from `import { ... } from 'firebase/storage'` to `import { ... } from '@angular/fire/storage'` and follow the official documentation.
 
 [Getting Started](https://firebase.google.com/docs/storage/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/storage)
 

package/docs/vertexai.md

@@ -0,0 +1,53 @@
+<small>
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Vertex AI
+</small>
+
+# Vertex AI (preview)
+
+The Vertex AI Gemini API gives you access to the latest generative AI models from Google: the Gemini models.
+
+[Learn more](https://firebase.google.com/docs/vertex-ai)
+
+## Dependency Injection
+
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
+```
+
+Provide a Vertex AI instance in the application's `app.config.ts`:
+
+```ts
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideVertexAI, getVertexAI } from '@angular/fire/vertexai-preview';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
+    provideVertexAI(() => getVertexAI()),
+    ...
+  ],
+  ...,
+}
+```
+
+Next inject `VertexAI` into your component:
+
+```typescript
+import { Component, inject } from '@angular/core';
+import { VertexAI } from '@angular/fire/vertexai-preview';
+
+@Component({ ... })
+export class MyComponent {
+    private vertexAI = inject(VertexAI);
+    ...
+}
+```
+
+## Firebase API
+
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/vertexai-preview'` to `import { ... } from '@angular/fire/vertexai-preview'` and follow the official documentation.
+
+[Getting Started](https://firebase.google.com/docs/vertex-ai/get-started?platform=web) | [API Reference](https://firebase.google.com/docs/reference/js/vertexai-preview)