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/clifirst if your app is on 21.0 or 21.1. -
firebase12.18.0 or newer andrxfire6.2.0 or newer are required (#3761, #3723). Olderrxfireversions ask forfirebase11, which installs a second SDK copy next to yourfirebase12. -
The
@angular/fire/vertexaientry point is gone. Its replacement is@angular/fire/ai, Firebase AI Logic (#3674).ng update @angular/fire@21rewrites the imports and renamed symbols, emitsAgentPlatformBackendin place of the deprecatedVertexAIBackend, and changes the default location fromus-central1toglobal, warning for every file whose region changed (#3725, #3762). The Imagen API, removed infirebase12.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
provideAppCheckon the server, andinject(AppCheck)returnsnullthere. Browser-side behavior is unchanged. This fixes theReferenceError: document is not definedbuild failure in server-rendered apps, because the reCAPTCHA providers need a browser. To keep App Check running during server rendering, provideAPP_CHECK_ON_SERVERastruein 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/fireupdates your project'sfirebasedependency to the supported^12.18.0, andng addaligns it during setup, preventing duplicated-SDK installs. by @armando-navarro in #3722 - feat:
ng add @angular/firewarns whenfirebaseis 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/fireno 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
firebase12.18:onRegistered,onUnregistered,registerandunregister. by @armando-navarro in #3761
Setting up (ng add)
- fix:
ng addgenerates working@angular/fire/aiimports when the AI feature is selected, instead of imports from a removed module path. by @coturiv in #3685 - fix: the
provideDataConnect(...)call thatng addgenerates escapes the values it takes from yourdataconnect.yamlandconnector.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.yamlparsing fails, instead of discarding it. by @armando-navarro in #3711
Deploying (ng deploy)
- fix:
ng deployno longer crashes on launch withERR_INVALID_ARG_TYPE. The schematics ship as a CommonJS bundle, which turned the code'simport.metalookup intoundefinedbefore 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 publishedpackage.jsonnever listed them, song deployfailed 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 updatestopping withThe 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 adddoes 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
idTokenexample. 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 injectedthis.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
@forexample. 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
- @mwilman made their first contribution in #3687
- @jhuleatt made their first contribution in #3700
- @Muneersahel made their first contribution in #3662
- @dominicbachmann made their first contribution in #3661
- @arolleaguekeng made their first contribution in #3640
- @IdanCo made their first contribution in #3606
- @Damiencastro made their first contribution in #3567
- @armando-navarro made their first contribution in #3702
- @coturiv made their first contribution in #3685
- @herdiyana256 made their first contribution in #3726
- @fr-esco made their first contribution in #3274
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