From 1f1a1d0823a33215aa6de76fca54ed7b1cb61c89 Mon Sep 17 00:00:00 2001 From: Armando Navarro Date: Tue, 4 Aug 2026 14:22:30 -0700 Subject: [PATCH] docs: refresh quickstart and README for current ng add and deploy paths The quickstart described the pre-v7 ng add (environment files and AngularFireModule) and told users to run ng deploy, which no longer works on a fresh project. Correct step 2 to what ng add writes today (provideFirebaseApp in the app config, no environment files), fix the scaffold file and class names to app.ts and class App, type the Firestore binding with an Item interface, and split step 6 into the client-rendered path (Firebase Hosting) and the server-rendered path (App Hosting). Add a Before you begin section covering the @next requirement on the newest Angular major, the Firebase CLI, and the harmless CLI prompts. README: drop the obsolete single-command deploy bullet, remove the developer-preview disclaimer, fix the appConfig example (brace and missing imports), alphabetize the product-integrations table, and make the Stackblitz note template-agnostic. --- README.md | 53 +++++++++++++++++++-------------------- docs/install-and-setup.md | 47 ++++++++++++++++++++-------------- 2 files changed, 54 insertions(+), 46 deletions(-) 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.