diff --git a/README.md b/README.md index f7084fbf2..f083fb49d 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ AngularFire smooths over the rough edges an Angular developer might encounter wh [Firebase JS SDK](https://github.com/firebase/firebase-js-sdk) & aims to provide a more natural developer experience by conforming to Angular conventions. -
ng add @angular/fire
 +
ng add @angular/fire@next
 - **Dependency injection** - Provide and Inject Firebase services in your components. - **Zone.js wrappers** - Stable zones allow proper functionality of service workers, forms, SSR, and pre-rendering. diff --git a/docs/ai.md b/docs/ai.md index 105cf7a6c..c381c08a9 100644 --- a/docs/ai.md +++ b/docs/ai.md @@ -8,14 +8,11 @@ Firebase AI Logic gives you access to the latest generative AI models from Googl [Learn more](https://firebase.google.com/docs/ai-logic) -> Firebase AI Logic was previously called **Vertex AI in Firebase**. If you are upgrading from AngularFire 20, the module moved from `@angular/fire/vertexai` to `@angular/fire/ai` and most symbols were renamed (`provideVertexAI` to `provideAI`, `VertexAI` to `AI`). One is not a rename: plain `getAI()` uses the Gemini Developer API backend, so the old `getVertexAI()` maps to `getAI(app, { backend: new AgentPlatformBackend() })`. Running `ng update @angular/fire` rewrites all of this for you and keeps your app on the same backend, though a call that passed no `location` moves from `us-central1` to `global`. See the [AngularFire 20 to 21 upgrade guide](./version-21-upgrade.md). +> Firebase AI Logic was previously called **Vertex AI in Firebase**. If you are upgrading from AngularFire 20, the module moved from `@angular/fire/vertexai` to `@angular/fire/ai` and most symbols were renamed (`provideVertexAI` to `provideAI`, `VertexAI` to `AI`). One is not a rename: plain `getAI()` uses the Gemini Developer API backend, so the old `getVertexAI()` maps to `getAI(app, { backend: new AgentPlatformBackend() })`. Running the `ng update` command in the [AngularFire 20 to 21 upgrade guide](./version-21-upgrade.md) rewrites all of this for you and keeps your app on the same backend, though a call that passed no `location` moves from `us-central1` to `global`. ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide an AI instance in the application's `app.config.ts`: diff --git a/docs/analytics.md b/docs/analytics.md index e064730b9..d1da2d5a5 100644 --- a/docs/analytics.md +++ b/docs/analytics.md @@ -12,10 +12,7 @@ Google Analytics is an app measurement solution, available at no charge, that pr ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide an Analytics instance in the application's `app.config.ts`: diff --git a/docs/app-check.md b/docs/app-check.md index 557bf578a..0490b718b 100644 --- a/docs/app-check.md +++ b/docs/app-check.md @@ -12,10 +12,7 @@ App Check helps protect your API resources from abuse by preventing unauthorized ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide an App Check instance in the application's `app.config.ts`: diff --git a/docs/auth.md b/docs/auth.md index 163f87115..0faef0072 100644 --- a/docs/auth.md +++ b/docs/auth.md @@ -15,10 +15,7 @@ Firebase Authentication integrates tightly with other Firebase services, and it ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide an Auth instance in the application's `app.config.ts`: diff --git a/docs/data-connect.md b/docs/data-connect.md index 88f2e1205..062324057 100644 --- a/docs/data-connect.md +++ b/docs/data-connect.md @@ -10,10 +10,7 @@ Firebase Data Connect (now known as "Firebase SQL Connect" in the Firebase docum ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Data Connect instance in the application's `app.config.ts`. `getDataConnect` takes a connector config that identifies your service, connector, and location; this is generated for you when you set up Data Connect and is also exported from your generated SDK: diff --git a/docs/database.md b/docs/database.md index 84e196a87..1eac2244b 100644 --- a/docs/database.md +++ b/docs/database.md @@ -12,10 +12,7 @@ The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSO ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Database instance in the application's `app.config.ts`: diff --git a/docs/firestore.md b/docs/firestore.md index 917e50ffc..6932d99fd 100644 --- a/docs/firestore.md +++ b/docs/firestore.md @@ -14,10 +14,7 @@ Cloud Firestore is the API that gives your application access to your database i ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Firestore instance in the application's `app.config.ts`: ```ts diff --git a/docs/functions.md b/docs/functions.md index f64f52e53..bd818bcb8 100644 --- a/docs/functions.md +++ b/docs/functions.md @@ -12,10 +12,7 @@ The Cloud Functions for Firebase client SDKs let you call functions directly fro ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Cloud Functions instance in the application's `app.config.ts`: diff --git a/docs/install-and-setup.md b/docs/install-and-setup.md index a9aea8265..00faaad16 100644 --- a/docs/install-and-setup.md +++ b/docs/install-and-setup.md @@ -2,39 +2,43 @@ ## Before you begin -- **Firebase CLI.** Setup uses the Firebase CLI (`firebase-tools`), version 14 or newer. `ng add` installs it if it is missing and prompts you to sign in, so you do not have to install it yourself first. It does not upgrade a copy you already have, so an older one stops setup with `firebase-tools version 14.0.0+ is required, please upgrade and run again`. To handle it ahead of time, or to clear that error, 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`. +- **Firebase CLI** + - Setup uses the Firebase CLI (`firebase-tools`). Install version 14 first, with `npm install -g firebase-tools@14`, then `firebase login`. + - With no CLI on the machine, `ng add` installs the newest version for you, and on version 15 setup stops right after the features question with `Cannot read properties of undefined (reading 'email')` (#3768). + - A copy older than 14 stops setup with `firebase-tools version 14.0.0+ is required, please upgrade and run again`, and `ng add` does not upgrade a copy you already have. - **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 # Using yarn create -yarn create @angular +yarn create @angular@21 cd ``` or ```bash # Using npm create -npm create @angular +npm create @angular@21 cd ``` optionally installing the tooling directly: ```bash # Installing the tooling directly -npm install -g @angular/cli +npm install -g @angular/cli@21 ng new cd ``` -The Angular CLI's `new` command will set up the latest Angular build in a new project structure. +These commands set up an Angular 21 project, the version AngularFire 21 supports. ### 2. Install AngularFire and Firebase +AngularFire 21 is currently a release candidate, published under the `next` tag: + ```bash -ng add @angular/fire +ng add @angular/fire@next ``` This installs AngularFire and configures your project. `ng add` will: diff --git a/docs/install-firebase-tools.md b/docs/install-firebase-tools.md index 3729e091a..623b46364 100644 --- a/docs/install-firebase-tools.md +++ b/docs/install-firebase-tools.md @@ -1,5 +1,7 @@ # Firebase Tools Install and Setup +> If you are installing this to run `ng add @angular/fire`, install version 14. With firebase-tools 15, setup stops with `Cannot read properties of undefined (reading 'email')` once you have chosen your features. + ### 1. Install package ```bash diff --git a/docs/messaging.md b/docs/messaging.md index 40bc86b54..62b8d9d08 100644 --- a/docs/messaging.md +++ b/docs/messaging.md @@ -10,10 +10,7 @@ Firebase Cloud Messaging (FCM) allows you to register devices with unique FCM to ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Cloud Messaging instance in the application's `app.config.ts`: diff --git a/docs/performance.md b/docs/performance.md index 3ffb93083..6dc53e797 100644 --- a/docs/performance.md +++ b/docs/performance.md @@ -12,10 +12,7 @@ Firebase Performance Monitoring is a service that helps you to gain insight into ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Performance instance in the application's `app.config.ts`: diff --git a/docs/remote-config.md b/docs/remote-config.md index bef8e381f..3add6c782 100644 --- a/docs/remote-config.md +++ b/docs/remote-config.md @@ -12,10 +12,7 @@ Firebase Remote Config is a cloud service that lets you change the behavior and ## Dependency Injection -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Remote Config instance in the application's `app.config.ts`: diff --git a/docs/storage.md b/docs/storage.md index e384c9704..7fd6f9f3b 100644 --- a/docs/storage.md +++ b/docs/storage.md @@ -14,10 +14,7 @@ Cloud Storage allows developers to upload and share user generated content such AngularFire allows you to work with Firebase Storage via Angular's Dependency Injection. -As a prerequisite, ensure that `AngularFire` has been added to your project via -```bash -ng add @angular/fire -``` +As a prerequisite, ensure that `AngularFire` has been added to your project as described in the [Quickstart](./install-and-setup.md). Provide a Cloud Storage instance in the application's `app.config.ts`: diff --git a/docs/version-21-upgrade.md b/docs/version-21-upgrade.md index 5d0e14445..1f3cbbe09 100644 --- a/docs/version-21-upgrade.md +++ b/docs/version-21-upgrade.md @@ -1,15 +1,16 @@ -# Upgrading to AngularFire 21 +# Upgrading to the AngularFire 21 Release Candidate AngularFire 21 targets **Angular 21** and the **Firebase JS SDK v12**. Most of the upgrade is handled for you by `ng update`. ## Run the update +The release candidate is published under the `next` tag. From an app on Angular 20 and AngularFire 20, run: + ```bash -ng update @angular/core @angular/cli # move your app to Angular 21 first -ng update @angular/fire # then AngularFire 21 +ng update @angular/core@21 @angular/cli@21 @angular/fire@next ``` -`ng update @angular/fire` runs a migration that: +The AngularFire update runs a migration that: - **Aligns your `firebase` dependency to `^12.18.0`.** AngularFire 21 requires Firebase JS SDK 12, at 12.18 or later. If your app requested an older `firebase`, whether that is 11 or an earlier 12, npm would install both that copy and the one AngularFire needs side by side, and the two copies reject each other's objects at runtime. The migration updates the dependency and reinstalls so you end up with a single copy. Verify with `npm ls firebase`. - **Rewrites Vertex AI imports to AI Logic** (see below). @@ -55,7 +56,7 @@ Firebase does not support the `global` location for the Live API models, so `get ### What the migration rewrites for you -`ng update @angular/fire` rewrites these imports and identifiers for you and logs every `getVertexAI` call it rewrites. `getGenerativeModel` keeps its name. +The AngularFire update rewrites these imports and identifiers for you and logs every `getVertexAI` call it rewrites. `getGenerativeModel` keeps its name. Imports straight from the Firebase SDK (`firebase/vertexai`, gone in SDK 12) are rewritten to `firebase/ai` under the same rules. The rewrite parses your sources with the `typescript` package (an optional peer dependency of `@angular/fire`). Every Angular workspace already has it, but if the migration warns that it could not be resolved, install `typescript` and re-run. See [ai.md](./ai.md) for current usage.