From 351d609b224dcf6d6387a98c9732cde874de80dc Mon Sep 17 00:00:00 2001 From: Armando Navarro Date: Mon, 3 Aug 2026 15:28:54 -0700 Subject: [PATCH] docs: fix broken code snippets in product guides Several product-guide snippets did not compile or parse as written, so a reader copying them hit errors before reaching Firebase. - Close the appConfig object literal with } instead of }) in the App Check, Auth, Database, Functions, Messaging, Remote Config, Storage, and Performance guides. - Import ApplicationConfig in every appConfig snippet so the type annotation resolves. - App Check: import getApp, which the snippet calls. - Firestore: correct "export Interface" to "export interface" (twice), import Observable from rxjs, and import CollectionReference and DocumentReference. - Auth and Database: replace the NgModule emulator and multi-instance examples with the standalone appConfig form the rest of the guides teach, and inline the Firebase config instead of reading a no-longer-generated environment file. - Messaging: repair the FcmService example (declare message$, move its assignment into the constructor, make deleteToken async) and bump the service-worker CDN imports from 9.22.0 to 12.4.0 to match the firebase dependency. --- docs/app-check.md | 5 +++-- docs/auth.md | 12 ++++++---- docs/database.md | 21 ++++++++++------- docs/firestore.md | 9 +++++--- docs/functions.md | 3 ++- docs/messaging.md | 52 +++++++++++++++++++++++-------------------- docs/performance.md | 3 ++- docs/remote-config.md | 3 ++- docs/storage.md | 3 ++- 9 files changed, 66 insertions(+), 45 deletions(-) diff --git a/docs/app-check.md b/docs/app-check.md index 3c6cd43d5..236f8aa7d 100644 --- a/docs/app-check.md +++ b/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: diff --git a/docs/auth.md b/docs/auth.md index b91469c47..2f2b519cb 100644 --- a/docs/auth.md +++ b/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; }), ] -}) +} ``` diff --git a/docs/database.md b/docs/database.md index 87b84d2dd..84e196a87 100644 --- a/docs/database.md +++ b/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 diff --git a/docs/firestore.md b/docs/firestore.md index c972b003e..917e50ffc 100644 --- a/docs/firestore.md +++ b/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; } } -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; } ``` diff --git a/docs/functions.md b/docs/functions.md index 13d720790..f64f52e53 100644 --- a/docs/functions.md +++ b/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: diff --git a/docs/messaging.md b/docs/messaging.md index 6a457527d..78c97671d 100644 --- a/docs/messaging.md +++ b/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; + + 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 diff --git a/docs/performance.md b/docs/performance.md index 9c15d0db0..3ffb93083 100644 --- a/docs/performance.md +++ b/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: diff --git a/docs/remote-config.md b/docs/remote-config.md index 15583ffe3..bef8e381f 100644 --- a/docs/remote-config.md +++ b/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: diff --git a/docs/storage.md b/docs/storage.md index fca6e37f3..e384c9704 100644 --- a/docs/storage.md +++ b/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: