@angular/fire 17.1.0-canary.1302e3a → 17.1.0-canary.58e6c3b

package/README.md

@@ -190,4 +190,14 @@ import { } from '@angular/fire/app-check';
 ```
 </td>
   </tr>
+  <tr>
+    <td>
+
+#### [Vertex AI](docs/vertexai.md#vertex-ai-preview)
+```ts
+import { } from '@angular/fire/vertexai-preview';
+```
+</td>
+
+  </tr>
 </table>

package/docs/analytics.md

@@ -9,6 +9,7 @@
 Google Analytics is an app measurement solution, available at no charge, that provides insight on app usage and user engagement.
 
 [Learn more](https://firebase.google.com/docs/analytics)
+
 ## Dependency Injection
 
 As a prerequisite, ensure that `AngularFire` has been added to your project via
@@ -16,52 +17,39 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ng add @angular/fire
 ```
 
-Provide a Google Analytics instance in the application's `NgModule` (`app.module.ts`):
+Provide a Analytics instance in the application's `app.config.ts`:
 
 ```ts
-@NgModule({
-  declarations: [
-    ...
-  ],
-  imports: [
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { provideAnalytics, getAnalytics } from '@angular/fire/analytics';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
+    provideAnalytics(() => getAnalytics()),
     ...
-    // App initialization
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
-    provideAnalytics(() => getAnalytics())
   ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
+  ...,
+}
 ```
 
-In your component class, for example `user-profile.component.ts` import and inject `Firestore`:
+Next inject `Analytics` into your component:
 
 ```typescript
 import { Component, inject } from '@angular/core';
 import { Analytics } from '@angular/fire/analytics';
 
-@Component({
-    standalone: true,
-    selector: 'app-user-profile',
-    ...
-})
+@Component({ ... })
 export class UserProfileComponent {
-    private analytics: Analytics = inject(Analytics);
+    private analytics = inject(Analytics);
     ...
 }
 ```
 
 ## Firebase API
 
-The [Firebase API for Google Analytics documentation](https://firebase.google.com/docs/reference/js/analytics.md#analytics_package) is available on the Firebase website.
-
-## Services
-
-### ScreenTrackingService
-
-Coming soon, for now [please review the documentation](https://firebase.google.com/docs/analytics/screenviews)
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
 
-### UserTrackingService
-Coming soon
+Update the imports from `import { ... } from 'firebase/analytics'` to `import { ... } from '@angular/fire/analytics'` and follow the official documentation.
 
+[Getting Started](https://firebase.google.com/docs/analytics/get-started?platform=web) | [API Reference](https://firebase.google.com/docs/reference/js/analytics)

package/docs/app-check.md

@@ -1,5 +1,5 @@
 <small>
-<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; Realtime App Check
+<a href="https://github.com/angular/angularfire">AngularFire</a> &#10097; <a href="../README.md#developer-guide">Developer Guide</a> &#10097; App Check
 </small>
 
 <img align="right" width="30%" src="images/reCAPTCHA-logo@1x.png">
@@ -11,28 +11,31 @@ App Check helps protect your API resources from abuse by preventing unauthorized
 [Learn More](https://firebase.google.com/docs/app-check)
 
 ## Dependency Injection
+
 As a prerequisite, ensure that `AngularFire` has been added to your project via
 ```bash
 ng add @angular/fire
 ```
 
-Provide an App Check instance and configuration in the application's `NgModule` (`app.module.ts`):
+Provide a App Check instance in the application's `app.config.ts`:
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { provideAppCheck } from '@angular/fire/app-check';
+import { provideAppCheck, initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideAppCheck(() => initializeAppCheck(getApp(), {
         provider: new ReCaptchaV3Provider(/* configuration */),
-      })),
-  ]
+    })),
+    ...
+  ],
+  ...
 })
 ```
 
-Next inject it into your component:
+Next inject `AppCheck` it into your component:
 
 ```ts
 import { Component, inject} from '@angular/core';
@@ -40,14 +43,15 @@ import { AppCheck } from '@angular/fire/app-check';
 
 @Component({ ... })
 export class AppCheckComponent {
-  private appCheck: AppCheck = inject(AppCheck);
+  private appCheck = inject(AppCheck);
   ...
 }
 ```
 
 ## Firebase API
 
-The [AppCheck documentation](https://firebase.google.com/docs/reference/js/app-check) is available on the Firebase website.
+AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
+
+Update the imports from `import { ... } from 'firebase/app-check'` to `import { ... } from '@angular/fire/app-check'` and follow the official documentation.
 
-## Convenience observables
-Coming soon.
+[Getting Started](https://firebase.google.com/docs/app-check/web/recaptcha-enterprise-provider) | [API Reference](https://firebase.google.com/docs/reference/js/app-check)

package/docs/auth.md

@@ -20,21 +20,23 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ng add @angular/fire
 ```
 
-Provide an auth instance in the application's `NgModule` (`app.module.ts`):
+Provide a Auth instance in the application's `app.config.ts`:
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { getAuth, provideAuth } from '@angular/fire/auth';
+import { provideAuth, getAuth } from '@angular/fire/auth';
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideAuth(() => getAuth()),
-  ]
+    ...
+  ],
+  ...
 })
 ```
 
-Next inject it into your component:
+Next inject `Auth` into your component:
 
 ```ts
 import { Component, inject} from '@angular/core';
@@ -42,7 +44,7 @@ import { Auth } from '@angular/fire/auth';
 
 @Component({ ... })
 export class LoginComponent {
-  private auth: Auth = inject(Auth);
+  private auth = inject(Auth);
   ...
 }
 ```
@@ -51,10 +53,43 @@ export class LoginComponent {
 
 AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
 
-Update the imports from `import { ... } from 'firebase/auth'` to `import { ... } from '@angular/fire/auth'` and follow the offical documentation.
+Update the imports from `import { ... } from 'firebase/auth'` to `import { ... } from '@angular/fire/auth'` and follow the official documentation.
 
 [Getting Started](https://firebase.google.com/docs/auth/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/auth)
 
+## Server-side Rendering
+
+To support Auth context in server-side rendering, you can provide `FirebaseServerApp`:
+
+```ts
+import { ApplicationConfig, PLATFORM_ID, inject } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { provideFirebaseApp, initializeApp, initializeServeApp, initializeServerApp } from '@angular/fire/app';
+import { provideAuth, getAuth } from '@angular/fire/auth';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => {
+      if (isPlatformBrowser(inject(PLATFORM_ID))) {
+        return initializeApp(firebaseConfig);
+      }
+      // Optional, since it's null in dev-mode and SSG
+      const request = inject(REQUEST, { optional: true });
+      const authIdToken = request?.headers.authorization?.split("Bearer ")[1];
+      return initializeServerApp(firebaseConfig, {
+        authIdToken,
+        releaseOnDeref: request || undefined
+      });
+    }),
+    provideAuth(() => getAuth(inject(FirebaseApp)),
+    ...
+  ],
+  ...
+})
+```
+
+Follow Firebase's [ Session Management with Service Workers documentation](https://firebase.google.com/docs/auth/web/service-worker-sessions) to learn how to pass the `idToken` to the server. __Note: this will not currently work in dev-mode as Angular SSR does not provide a method to get the Request headers.__
+
 ## Convenience observables
 
 AngularFire provides observables to allow convenient use of the Firebase Authentication with RXJS.

package/docs/database.md

@@ -17,32 +17,32 @@ As a prerequisite, ensure that `AngularFire` has been added to your project via
 ng add @angular/fire
 ```
 
-Provide an RTBD instance in the application's `NgModule` (`app.module.ts`):
+Provide a Database instance in the application's `app.config.ts`:
 
 ```ts
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
-import { getDatabase, provideDatabase } from '@angular/fire/database';
+import { provideDatabase, getDatabase } from '@angular/fire/database';
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideDatabase(() => getDatabase()),
-  ]
+    ...
+  ],
+  ...
 })
 ```
 
-Next inject it into your component:
+Next inject `Database` into your component:
 
 ```ts
 import { Component, inject } from '@angular/core';
 import { Database } from '@angular/fire/database';
 
 @Component({...})
-extend class DepartmentComponent {
-  private database: Database = inject(Database);
-
-  constructor() {
-  }
+export class DepartmentComponent {
+  private database = inject(Database);
+  ...
 }
 ```
 
@@ -50,7 +50,7 @@ extend class DepartmentComponent {
 
 AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
 
-Just change your imports from `import { ... } from 'firebase/database'` to `import { ... } from '@angular/fire/database'` and follow the offical documentation.
+Just change your imports from `import { ... } from 'firebase/database'` to `import { ... } from '@angular/fire/database'` and follow the official documentation.
 
 [Getting Started](https://firebase.google.com/docs/database/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/database)
 

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/messaging.md

@@ -1,25 +1,47 @@
 <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
 
 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.
 
-# Provide Messaging to your existing application
+## Dependency Injection
 
+As a prerequisite, ensure that `AngularFire` has been added to your project via
+```bash
+ng add @angular/fire
 ```
-import { getMessaging, provideMessaging } from "@angular/fire/messaging";
 
-bootstrapApplication(AppComponent, {
+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: [
-	  ...,
-      provideMessaging(() => getMessaging())
-    ),
+    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 

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)

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/ng-packagr/package.schema.json",
   "name": "@angular/fire",
-  "version": "17.1.0-canary.1302e3a",
+  "version": "17.1.0-canary.58e6c3b",
   "description": "Angular + Firebase = ❤️",
   "schematics": "./schematics/collection.json",
   "builders": "./schematics/builders.json",