@angular/fire 17.1.0 → 18.0.0-canary.c866d08

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/compat/proxy.d.ts

@@ -24,8 +24,8 @@ export type ɵPromiseProxy<T> = {
 };
 export declare const ɵlazySDKProxy: (klass: any, observable: Observable<any>, zone: NgZone, options?: {
     spy?: {
-        get?: (name: string, it: any) => void;
-        apply?: (name: string, args: any[], it: any) => void;
+        get?: ((name: string, it: any) => void);
+        apply?: ((name: string, args: any[], it: any) => void);
     };
 }) => any;
 export declare const ɵapplyMixins: (derivedCtor: any, constructors: any[]) => void;

package/compat/storage/pipes/storageUrl.pipe.d.ts

@@ -1,5 +1,4 @@
-import { ChangeDetectorRef, OnDestroy, PipeTransform } from '@angular/core';
-import { TransferState } from '@angular/platform-browser';
+import { ChangeDetectorRef, OnDestroy, PipeTransform, TransferState } from '@angular/core';
 import { AngularFireStorage } from '../storage';
 import * as i0 from "@angular/core";
 /** to be used with in combination with | async */

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,38 +17,31 @@ 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);
     ...
 }
 ```

package/docs/app-check.md

@@ -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,7 +43,7 @@ import { AppCheck } from '@angular/fire/app-check';
 
 @Component({ ... })
 export class AppCheckComponent {
-  private appCheck: AppCheck = inject(AppCheck);
+  private appCheck = inject(AppCheck);
   ...
 }
 ```

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);
+  ...
 }
 ```
 

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,39 +18,31 @@ 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);
     ...
 }
 ```

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,7 +41,7 @@ import { Functions } from '@angular/fire/functions';
 
 @Component({ ... })
 export class AppComponent {
-  private functions: Functions = inject(Functions);
+  private functions = inject(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,7 +41,7 @@ import { Performance } from '@angular/fire/performance';
 
 @Component({ ... })
 export class PerformanceComponent {
-  private performance: Performance = inject(Performance);
+  private performance = inject(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,7 +41,7 @@ import { RemoteConfig } from '@angular/fire/remote-config';
 
 @Component({ ... })
 export class RemoteConfigComponent {
-  private remoteConfig: RemoteConfig = inject(RemoteConfig);
+  private remoteConfig = inject(RemoteConfig);
   ...
 }
 ```

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,12 +43,11 @@ 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.

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)