github angular/angularfire 21.0.0

6 hours ago

Upgrading from AngularFire 20

AngularFire 21 requires Angular 21.2 or newer, firebase 12.18.0 or newer, rxfire 6.2.0 or newer, and TypeScript 5.8 or newer (below 6). ng add and ng deploy work with firebase-tools 14 or 15.

ng update @angular/core@21 @angular/cli@21 @angular/fire

The AngularFire 21 upgrade guide covers the rest, including the Vertex AI to Firebase AI Logic move.

Update firebase together with @angular/fire. If your package.json still requests firebase 11, npm does not report a conflict. It installs both SDK versions side by side, and the two copies reject each other's objects at runtime. ng update @angular/fire@21 moves your firebase dependency to ^12.18.0 for you. If you upgrade by hand, run npm install firebase@^12 with it, then check that npm ls firebase shows one version.

Breaking changes

  • Angular 21.2 or newer is required (#3763). Angular 21 is in long-term support, so 21.2 is its final minor line. Run ng update @angular/core @angular/cli first if your app is on 21.0 or 21.1.

  • firebase 12.18.0 or newer and rxfire 6.2.0 or newer are required (#3761, #3723). Older rxfire versions ask for firebase 11, which installs a second SDK copy next to your firebase 12.

  • The @angular/fire/vertexai entry point is gone. Its replacement is @angular/fire/ai, Firebase AI Logic (#3674). ng update @angular/fire@21 rewrites the imports and renamed symbols, emits AgentPlatformBackend in place of the deprecated VertexAIBackend, and changes the default location from us-central1 to global, warning for every file whose region changed (#3725, #3762). The Imagen API, removed in firebase 12.18, is no longer wrapped, and the migration warns remaining Imagen users (#3750).

  • App Check no longer runs during server rendering by default (#3773). AngularFire no longer calls the function passed to provideAppCheck on the server, and inject(AppCheck) returns null there. Browser-side behavior is unchanged. This fixes the ReferenceError: document is not defined build failure in server-rendered apps, because the reCAPTCHA providers need a browser. To keep App Check running during server rendering, provide APP_CHECK_ON_SERVER as true in your server config:

    import { APP_CHECK_ON_SERVER } from '@angular/fire/app-check';
    
    // in your server app config's providers
    { provide: APP_CHECK_ON_SERVER, useValue: true },

    Details, including how server-side Firebase requests can still carry an App Check token: App Check during server rendering.

Updating from a 21 release candidate or canary build

Installing a release candidate saves its exact version, so it does not move on its own (#3709). Run:

ng update @angular/fire@21

If you installed a canary build, run npm install @angular/fire@latest instead. ng update does not offer 21.0.0 to a 21.0.1-canary install, because the canary's version number is higher.

What's Changed

Fixes that also shipped to Angular 20 apps in 20.0.3, 20.1.0 and 20.1.1 are not repeated here.

Upgrading to v21

  • fix: ng update @angular/fire updates your project's firebase dependency to the supported ^12.18.0, and ng add aligns it during setup, preventing duplicated-SDK installs. by @armando-navarro in #3722
  • feat: ng add @angular/fire warns when firebase is installed at more than one version, and shows the dependency chain. Prevents various hard-to-diagnose bugs. by @armando-navarro in #3760
  • fix: ng update @angular/fire no longer stops before the v21 migration when it runs under Angular CLI 22.3, whose schematics package refuses the file path AngularFire's schematics loaded. by @armando-navarro in #3793
  • build: AngularFire wraps four new Cloud Messaging functions from firebase 12.18: onRegistered, onUnregistered, register and unregister. by @armando-navarro in #3761

Setting up (ng add)

  • fix: ng add generates working @angular/fire/ai imports when the AI feature is selected, instead of imports from a removed module path. by @coturiv in #3685
  • fix: the provideDataConnect(...) call that ng add generates escapes the values it takes from your dataconnect.yaml and connector.yaml. A value containing a quote character could previously place arbitrary code in the generated file. by @herdiyana256 in #3727
  • fix: log the caught error when dataconnect.yaml parsing fails, instead of discarding it. by @armando-navarro in #3711

Deploying (ng deploy)

  • fix: ng deploy no longer crashes on launch with ERR_INVALID_ARG_TYPE. The schematics ship as a CommonJS bundle, which turned the code's import.meta lookup into undefined before it reached any real work. by @armando-navarro in #3729
  • fix: declare the three packages the schematics require at runtime (jsonc-parser, @angular-devkit/core, @angular-devkit/architect). The published package.json never listed them, so ng deploy failed to resolve modules under pnpm's default layout and Yarn Plug'n'Play. by @armando-navarro in #3747

Server-side rendering

  • fix(app-check)!: skip App Check during server rendering by default. See "Breaking changes" above. by @armando-navarro in #3773

Documentation

  • docs: new guide, upgrading from AngularFire 20 to 21, including the removed peer dependencies, the App Check change, and how to get past ng update stopping with The Angular CLI requires a minimum Node.js version of .... by @armando-navarro in #3725, #3788 and #3795
  • docs: the App Check guide explains what changes during server rendering, how to run App Check there with APP_CHECK_ON_SERVER, and how to keep App Check out of the server on older releases. by @armando-navarro in #3775
  • docs: the auth guide's Server-side Rendering section is rewritten around a verified working setup. The old snippet did not compile, and each of the four required steps explains what silently breaks without it. by @armando-navarro in #3740
  • docs: new guide, Deploying SSR to App Hosting, including how to detect and fix the silent fallback to client-side rendering. by @armando-navarro in #3720
  • docs: new Data Connect guide, linked from the README feature table. by @armando-navarro in #3724
  • docs: new injection-context recipe showing how to keep AngularFire calls in an injection context in async code, and what a call outside one loses. by @armando-navarro in #3721 and #3759
  • docs: the Quickstart and README match what ng add does today, with current scaffold names, the Firebase Hosting and App Hosting deploy paths, and the prerequisites up front, including npm 11.6 or later, since older npm cannot install a new Angular 21 project (Cannot read properties of null (reading 'edgesOut')). by @armando-navarro in #3736, #3765 and #3787
  • docs: the copy-paste samples in the product guides compile as written again. by @armando-navarro in #3732
  • docs: fix stale links and grammar, remove obsolete doc files. by @armando-navarro in #3734
  • docs: log the token value in the auth idToken example. by @armando-navarro in #3728
  • docs: import the pipes correctly in the route-guard examples. by @Erick2280 in #3623
  • docs: the auth guide's user$ example references the injected this.auth. by @arolleaguekeng in #3640
  • docs: fix invalid code in the README's Firestore example. by @dominicbachmann in #3661
  • docs: fix a mismatched observable name in the README's @for example. by @IdanCo in #3606

Sample app

  • chore: the sample app runs on Angular 21 as the v21 CLI generates it (zoneless change detection, incremental hydration, Express 5), with a working Cloud Functions demo on Node 22. by @markgoho in #3671

New Contributors

Thanks to everyone who tested the release candidates and reported issues. The reports on #3684, #3681 and #3682 are what identified the duplicated-SDK cause, and they are why ng update corrects it for you.

Full Changelog: 20.1.1...21.0.0

Don't miss a new angularfire release

NewReleases is sending notifications on new releases.