From f96d98c8e7f27b5618029dc300b8f66dd119e216 Mon Sep 17 00:00:00 2001 From: James Daniels Date: Wed, 15 May 2024 12:19:13 -0400 Subject: [PATCH 1/2] Standlone DI in the docs --- docs/analytics.md | 34 ++++++++++++++-------------------- docs/app-check.md | 21 ++++++++++++--------- docs/auth.md | 20 +++++++++++--------- docs/database.md | 24 ++++++++++++------------ docs/firestore.md | 36 ++++++++++++++---------------------- docs/functions.md | 18 ++++++++++-------- docs/messaging.md | 36 +++++++++++++++++++++++++++++------- docs/performance.md | 18 ++++++++++-------- docs/remote-config.md | 18 ++++++++++-------- docs/storage.md | 19 ++++++++++--------- 10 files changed, 132 insertions(+), 112 deletions(-) diff --git a/docs/analytics.md b/docs/analytics.md index f7002da35..b61c5ab7a 100644 --- a/docs/analytics.md +++ b/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); ... } ``` diff --git a/docs/app-check.md b/docs/app-check.md index 0674f29ee..3c6cd43d5 100644 --- a/docs/app-check.md +++ b/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); ... } ``` diff --git a/docs/auth.md b/docs/auth.md index fe42ccd25..fead70f7f 100644 --- a/docs/auth.md +++ b/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,7 +53,7 @@ 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) diff --git a/docs/database.md b/docs/database.md index 6a3994454..87b84d2dd 100644 --- a/docs/database.md +++ b/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); + ... } ``` diff --git a/docs/firestore.md b/docs/firestore.md index 044bf9e1a..bf2aee08c 100644 --- a/docs/firestore.md +++ b/docs/firestore.md @@ -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); ... } ``` diff --git a/docs/functions.md b/docs/functions.md index b4caafb79..994483b67 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -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); ... } ``` diff --git a/docs/messaging.md b/docs/messaging.md index fe5aa3742..ca7f7ce84 100644 --- a/docs/messaging.md +++ b/docs/messaging.md @@ -8,18 +8,40 @@ 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 diff --git a/docs/performance.md b/docs/performance.md index 50801ad13..caa0e29e8 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -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); ... } ``` diff --git a/docs/remote-config.md b/docs/remote-config.md index ff5cdcfff..7d71b5b35 100644 --- a/docs/remote-config.md +++ b/docs/remote-config.md @@ -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); ... } ``` diff --git a/docs/storage.md b/docs/storage.md index 9d75ab06e..0d4097b6f 100644 --- a/docs/storage.md +++ b/docs/storage.md @@ -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. From e4d9b25f1ac6a19fab494292ea01f34b29a50c8a Mon Sep 17 00:00:00 2001 From: James Daniels Date: Wed, 15 May 2024 12:31:45 -0400 Subject: [PATCH 2/2] Drop realtime from all the doc breadcrumbs --- docs/firestore.md | 2 +- docs/functions.md | 2 +- docs/performance.md | 2 +- docs/remote-config.md | 2 +- docs/storage.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/firestore.md b/docs/firestore.md index bf2aee08c..c972b003e 100644 --- a/docs/firestore.md +++ b/docs/firestore.md @@ -1,7 +1,7 @@ -AngularFire ❱ Developer Guide ❱ Realtime Cloud Firestore +AngularFire ❱ Developer Guide ❱ Cloud Firestore # Cloud Firestore diff --git a/docs/functions.md b/docs/functions.md index 994483b67..13d720790 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -1,7 +1,7 @@ -AngularFire ❱ Developer Guide ❱ Realtime Cloud Functions +AngularFire ❱ Developer Guide ❱ Cloud Functions # Cloud Functions diff --git a/docs/performance.md b/docs/performance.md index caa0e29e8..9c15d0db0 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -1,7 +1,7 @@ -AngularFire ❱ Developer Guide ❱ Realtime Performance Monitoring +AngularFire ❱ Developer Guide ❱ Performance Monitoring # Performance Monitoring diff --git a/docs/remote-config.md b/docs/remote-config.md index 7d71b5b35..15583ffe3 100644 --- a/docs/remote-config.md +++ b/docs/remote-config.md @@ -1,7 +1,7 @@ -AngularFire ❱ Developer Guide ❱ Realtime Remote Config +AngularFire ❱ Developer Guide ❱ Remote Config # Remote Config diff --git a/docs/storage.md b/docs/storage.md index 0d4097b6f..fca6e37f3 100644 --- a/docs/storage.md +++ b/docs/storage.md @@ -1,7 +1,7 @@ -AngularFire ❱ Developer Guide ❱ Realtime Cloud Storage +AngularFire ❱ Developer Guide ❱ Cloud Storage # Cloud Storage