docs: fix broken code snippets in product guides

docs/app-check.md

@@ -20,7 +20,8 @@ ng add @angular/fire
 Provide a App Check instance in the application's `app.config.ts`:
 
 ```ts
-import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
+import { ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp, getApp } from '@angular/fire/app';
 import { provideAppCheck, initializeAppCheck, ReCaptchaV3Provider } from '@angular/fire/app-check';
 
 export const appConfig: ApplicationConfig = {
@@ -32,7 +33,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `AppCheck` it into your component:

docs/auth.md

@@ -23,6 +23,7 @@ ng add @angular/fire
 Provide a Auth instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideAuth, getAuth } from '@angular/fire/auth';
 
@@ -33,7 +34,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `Auth` into your component:
@@ -186,15 +187,18 @@ export class UserComponent implements OnDestroy {
 ## Connecting the emulator suite
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';
 
-@NgModule({
-  imports: [
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideAuth(() => {
       const auth = getAuth();
       connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
       return auth;
     }),
   ]
-})
+}
 ```

docs/database.md

@@ -20,6 +20,7 @@ ng add @angular/fire
 Provide a Database instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideDatabase, getDatabase } from '@angular/fire/database';
 
@@ -30,7 +31,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `Database` into your component:
@@ -131,22 +132,26 @@ The `fromRef()` function creates an observable that emits reference changes.
 ## Connecting to the emulator suite
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
+import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { connectDatabaseEmulator, getDatabase, provideDatabase } from '@angular/fire/database';
 
-@NgModule({
-  imports: [
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideDatabase(() => {
       const database = getDatabase();
       connectDatabaseEmulator(database, 'localhost', 9000);
       return database;
     }),
   ]
-})
+}
 ```
 
 ## Working with multiple instances
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, FirebaseApp, initializeApp } from '@angular/fire/app';
 import { getDatabase, provideDatabase } from '@angular/fire/database';
 
@@ -156,14 +161,14 @@ const DATABASE_SHARD_URLS = [
   'https://BAZ.firebaseio.com',
 ];
 
-@NgModule({
-  imports: [
-    provideFirebaseApp(() => initializeApp(environment.firebase)),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideFirebaseApp(() => initializeApp({ ... })),
     provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[0])),
     provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[1])),
     provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[2])),
   ]
-})
+}
 ```
 
 ```ts

docs/firestore.md

@@ -21,6 +21,7 @@ ng add @angular/fire
 Provide a Firestore instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideFirestore, getFirestore } from '@angular/fire/firestore';
 
@@ -71,6 +72,7 @@ In `user-profile.component.ts`:
 ```typescript
 import { Firestore, collection, collectionData} from '@angular/fire/firestore';
 import { Component, inject } from '@angular/core';
+import { Observable } from 'rxjs';
 
 @Component ({
     selector: 'app-user-profile',
@@ -89,7 +91,7 @@ export class UserProfileComponent {
         this.users$ = collectionData(userProfileCollection) as Observable<UserProfile[]>;
     }
 }
-export Interface UserProfile {
+export interface UserProfile {
     username: string;
 }
 ```
@@ -114,8 +116,9 @@ To write to Cloud Firestore use the `addDoc` function. It will create a new docu
 
 
 ```typescript
-import { Firestore, collection, collectionData, addDoc} from '@angular/fire/firestore';
+import { Firestore, collection, collectionData, addDoc, CollectionReference, DocumentReference } from '@angular/fire/firestore';
 import { Component, inject } from '@angular/core';
+import { Observable } from 'rxjs';
 
 @Component ({
     selector: 'app-user-profile',
@@ -137,7 +140,7 @@ export class UserProfileComponent {
         });
     }
 }
-export Interface UserProfile {
+export interface UserProfile {
     username: string;
 }
 ```

docs/functions.md

@@ -20,6 +20,7 @@ ng add @angular/fire
 Provide a Cloud Functions instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideFunctions, getFunctions } from '@angular/fire/functions';
 
@@ -30,7 +31,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `Functions` into your component:

docs/messaging.md

@@ -18,6 +18,7 @@ ng add @angular/fire
 Provide a Cloud Messaging instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideMessaging, getMessaging } from '@angular/fire/messaging';
 
@@ -28,7 +29,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `Messaging` into your component:
@@ -55,10 +56,10 @@ There are two parts to Firebase Messaging, a Service Worker and the DOM API. Ang
 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
+// This sample application is using 12.4.0, 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";
+import { initializeApp } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-app.js";
+import { getMessaging } from "https://www.gstatic.com/firebasejs/12.4.0/firebase-messaging-sw.js";
 
 const firebaseApp = initializeApp({
   apiKey: "",
@@ -83,16 +84,18 @@ import { Observable, tap } from "rxjs";
   providedIn: "root",
 })
 export class FcmService {
-  constructor(private msg: Messaging){
+  message$: Observable<unknown>;
+
+  constructor(private msg: Messaging) {
     Notification.requestPermission().then(
-    (notificationPermissions: NotificationPermission) => {
-      if (notificationPermissions === "granted") {
-        console.log("Granted");
-      }
-      if (notificationPermissions === "denied") {
-        console.log("Denied");
-      }
-    });
+      (notificationPermissions: NotificationPermission) => {
+        if (notificationPermissions === "granted") {
+          console.log("Granted");
+        }
+        if (notificationPermissions === "denied") {
+          console.log("Denied");
+        }
+      });
     navigator.serviceWorker
       .register("/assets/firebase-messaging-sw.js", {
         type: "module",
@@ -101,23 +104,24 @@ export class FcmService {
         getToken(this.msg, {
           vapidKey: `an optional key generated on Firebase for your fcm tokens`,
           serviceWorkerRegistration: serviceWorkerRegistration,
-        }).then((x) => {
-          console.log('my fcm token', x);
+        }).then((token) => {
+          console.log('my fcm token', token);
           // 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);
-	    })
+      });
+    this.message$ = new Observable((sub) =>
+      onMessage(this.msg, (msg) => sub.next(msg))).pipe(
+        tap((msg) => {
+          console.log("My Firebase Cloud Message", msg);
+        })
     );
-    }
-  deleteToken(){
+  }
+
+  async 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

docs/performance.md

@@ -20,6 +20,7 @@ ng add @angular/fire
 Provide a Performance instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { providePerformance, getPerformance } from '@angular/fire/performance';
 
@@ -30,7 +31,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `Performance` into your component:

docs/remote-config.md

@@ -20,6 +20,7 @@ ng add @angular/fire
 Provide a Remote Config instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideRemoteConfig, getRemoteConfig } from '@angular/fire/remote-config';
 
@@ -30,7 +31,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `RemoteConfig` into your component:

docs/storage.md

@@ -22,6 +22,7 @@ ng add @angular/fire
 Provide a Cloud Storage instance in the application's `app.config.ts`:
 
 ```ts
+import { ApplicationConfig } from '@angular/core';
 import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
 import { provideStorage, getStorage } from '@angular/fire/storage';
 
@@ -32,7 +33,7 @@ export const appConfig: ApplicationConfig = {
     ...
   ],
   ...
-})
+}
 ```
 
 Next inject `Storage` into your component: