diff --git a/README.md b/README.md index 5d6e6407b..f7084fbf2 100644 --- a/README.md +++ b/README.md @@ -12,34 +12,33 @@ by conforming to Angular conventions. - **Observable based** - Utilize RxJS rather than callbacks for real-time streams. - **NgRx friendly API** - Integrate with NgRx using AngularFire's action based APIs. - **Lazy-loading** - AngularFire dynamically imports much of Firebase, reducing the time to load your app. -- **Deploy schematics** - Get your Angular application deployed on Firebase Hosting with a single command. - **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics. - **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks. ## Example use ```ts +import { ApplicationConfig } from '@angular/core'; import { provideFirebaseApp, initializeApp } from '@angular/fire/app'; import { getFirestore, provideFirestore } from '@angular/fire/firestore'; export const appConfig: ApplicationConfig = { providers: [ - provideFirebaseApp(() => initializeApp({ ... })), + provideFirebaseApp(() => initializeApp({ /* ...your Firebase config... */ })), provideFirestore(() => getFirestore()), - ... + // ... ], - ... -}) + // ... +} ``` ```ts import { AsyncPipe } from '@angular/common'; -import { inject } from '@angular/core'; +import { Component, inject } from '@angular/core'; import { Firestore, collectionData, collection } from '@angular/fire/firestore'; interface Item { - name: string, - ... + name: string; }; @Component({ @@ -55,7 +54,7 @@ interface Item { `, imports: [AsyncPipe] }) -export class AppComponent { +export class App { firestore = inject(Firestore); itemCollection = collection(this.firestore, 'items'); items$ = collectionData(this.itemCollection); @@ -70,7 +69,7 @@ export class AppComponent { [Contributing](CONTRIBUTING.md) -[Stackblitz Template](https://stackblitz.com/edit/angular-fire-start) - Remember to set your Firebase configuration in `app/app.module.ts`. +[Stackblitz Template](https://stackblitz.com/edit/angular-fire-start) - A runnable AngularFire example. Add your own Firebase configuration to connect it to your project. [Upgrading from v6.0? Check out our guide.](docs/version-7-upgrade.md) @@ -84,7 +83,7 @@ The [`sample`](sample) folder contains a kitchen sink application that demonstra Get help on our [Q&A board](https://github.com/angular/angularfire/discussions?discussions_q=category%3AQ%26A), the official [Firebase Mailing List](https://groups.google.com/forum/#!forum/firebase-talk), the [Firebase Community Slack](https://firebase.community/) (`#angularfire2`), the [Angular Community Discord](http://discord.gg/angular) (`#firebase`), [Gitter](https://gitter.im/angular/angularfire2), the [Firebase subreddit](https://www.reddit.com/r/firebase), or [Stack Overflow](https://stackoverflow.com/questions/tagged/angularfire2). -> **NOTE:** While relatively stable, AngularFire is a [developer preview](https://angular.io/guide/releases#developer-preview) and is subject to change before general availability. Questions on the mailing list and issues filed here are answered on a best-effort basis by maintainers and other community members. If you are able to reproduce a problem with Firebase outside of AngularFire's implementation, please [file an issue on the Firebase JS SDK](https://github.com/firebase/firebase-js-sdk/issues) or reach out to the personalized [Firebase support channel](https://firebase.google.com/support/). +> **NOTE:** Questions on the mailing list and issues filed here are answered on a best-effort basis by maintainers and other community members. If you are able to reproduce a problem with Firebase outside of AngularFire's implementation, please [file an issue on the Firebase JS SDK](https://github.com/firebase/firebase-js-sdk/issues) or reach out to the personalized [Firebase support channel](https://firebase.google.com/support/). ## Developer Guide @@ -98,10 +97,26 @@ This developer guide assumes you're using the new tree-shakable AngularFire API, +#### [AI Logic](docs/ai.md#ai-logic) +```ts +import { } from '@angular/fire/ai'; +``` + + + #### [Analytics](docs/analytics.md#analytics) ```ts import { } from '@angular/fire/analytics'; ``` + + + + + +#### [App Check](docs/app-check.md#app-check) +```ts +import { } from '@angular/fire/app-check'; +``` @@ -173,22 +188,6 @@ import { } from '@angular/fire/database'; ```ts import { } from '@angular/fire/remote-config'; ``` - - - - - -#### [App Check](docs/app-check.md#app-check) -```ts -import { } from '@angular/fire/app-check'; -``` - - - -#### [AI Logic](docs/ai.md#ai-logic) -```ts -import { } from '@angular/fire/ai'; -``` diff --git a/docs/install-and-setup.md b/docs/install-and-setup.md index 59f4b53d6..62803220a 100644 --- a/docs/install-and-setup.md +++ b/docs/install-and-setup.md @@ -1,5 +1,11 @@ # AngularFire Quickstart +## Before you begin + +- **Firebase CLI.** Setup uses the Firebase CLI (`firebase-tools`). `ng add` installs it if it is missing and prompts you to sign in, so you do not have to install it yourself first. To handle it ahead of time, run `npm install -g firebase-tools` then `firebase login`. +- **On the newest Angular major, use `@next`.** If `ng add @angular/fire` reports an Angular peer-dependency conflict, your Angular version is newer than AngularFire's default (`latest`) release. Install the version-matched pre-release instead: `ng add @angular/fire@next`. +- **Harmless CLI noise.** The Firebase CLI may print a `punycode` deprecation warning or ask about enabling extra features (for example Gemini) during setup. These come from the CLI, not from AngularFire, and are safe to ignore. + ### 1. Create a new project ```bash @@ -31,14 +37,14 @@ The Angular CLI's `new` command will set up the latest Angular build in a new pr ng add @angular/fire ``` -Now that you have a new project setup, install AngularFire and Firebase from npm. This will complete the following tasks: +This installs AngularFire and configures your project. `ng add` will: -1. Add Firebase config to environments variables -2. Configure `@NgModule` for the `AngularFireModule` +1. Prompt you to select the features to enable and the Firebase project to use, signing you in to Firebase if needed. +2. Add `provideFirebaseApp(...)`, along with a provider for each feature you select, to your app configuration (for example `app.config.ts`), with your Firebase configuration inlined. No environment files are created. ### 3. Inject `Firestore` -Open `/src/app/app.component.ts`, and make the following changes to : +Open `/src/app/app.ts` and make the following changes: ```ts import { Component, inject } from '@angular/core'; @@ -47,11 +53,11 @@ import { Firestore } from '@angular/fire/firestore'; @Component({ selector: 'app-root', - templateUrl: 'app.component.html', - styleUrls: ['app.component.css'], + templateUrl: './app.html', + styleUrl: './app.css', imports: [AsyncPipe], }) -export class AppComponent { +export class App { firestore: Firestore = inject(Firestore); constructor() { @@ -62,7 +68,7 @@ export class AppComponent { ### 4. Bind a Firestore collection to a list -In `/src/app/app.component.ts`: +In `/src/app/app.ts`: ```ts import { Component, inject } from '@angular/core'; @@ -70,25 +76,28 @@ import { AsyncPipe } from '@angular/common'; import { Observable } from 'rxjs'; import { Firestore, collection, collectionData } from '@angular/fire/firestore'; +interface Item { + name: string; +} + @Component({ selector: 'app-root', - standalone: true, imports: [AsyncPipe], - templateUrl: 'app.component.html', - styleUrls: ['app.component.css'] + templateUrl: './app.html', + styleUrl: './app.css' }) -export class AppComponent { +export class App { firestore: Firestore = inject(Firestore); - items$: Observable; + items$: Observable; constructor() { const aCollection = collection(this.firestore, 'items') - this.items$ = collectionData(aCollection); + this.items$ = collectionData(aCollection); } } ``` -Open `/src/app/app.component.html`: +Open `/src/app/app.html`: ```html
    @@ -112,8 +121,8 @@ Once you've created a `items` collection and are inserting documents, you should ### 6. Deploy your app -Finally, we can deploy the application to Firebase hosting: +How you deploy depends on whether your app uses server-side rendering (SSR), which the Angular CLI asks about when you create the project. -```bash -ng deploy -``` +**Client-side rendered apps** (the default) build to static files, which you deploy to Firebase Hosting. Follow Firebase's [Hosting quickstart](https://firebase.google.com/docs/hosting/quickstart) to build and deploy your app. + +**Server-side rendered apps** run a Node server, so deploy them to [Firebase App Hosting](app-hosting.md), Firebase's recommended path for SSR. That guide also covers a common case where an SSR app silently falls back to client-side rendering after deploying.