Upgrade to Angular 22

[dekathomas]

I'm trying to upgrade my angular project to angular 22 from angular 21, and i got error

Package "@angular/fire" has an incompatible peer dependency to "@angular/common" (requires "^20.0.0" (extended), would install "22.0.0"). Package "@angular/fire" has an incompatible peer dependency to "@angular/core" (requires "^20.0.0" (extended), would install "22.0.0"). Package "@angular/fire" has an incompatible peer dependency to "@angular/platform-browser" (requires "^20.0.0" (extended), would install "22.0.0"). Package "@angular/fire" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires "^20.0.0" (extended), would install "22.0.0").

Could anyone help me? Because I don't find compatible version of @angular/fire for Angular 21. Thank you.

[IsmaelBembo]

Hi, there is no compatible version with angular 21 or 22, the project seems abandoned. Depending on how big your application is, you could easily transition to the core Firbease JS SDK.

[jiacontrerasp]

I tried ^21.0.0-rc.0 and it seems to work for me

{
  (...)
  "private": true,
  "dependencies": {
    "@angular/animations": "^22.0.0",
    "@angular/cdk": "^22.0.0",
    "@angular/common": "^22.0.0",
    "@angular/compiler": "^22.0.0",
    "@angular/core": "^22.0.0",
    "@angular/fire": "^21.0.0-rc.0",
    "@angular/forms": "^22.0.0",
    "@angular/material": "^22.0.0",
    "@angular/material-moment-adapter": "^22.0.0",
    "@angular/platform-browser": "^22.0.0",
    "@angular/platform-browser-dynamic": "^22.0.0",
    "@angular/platform-server": "^22.0.0",
    "@angular/router": "^22.0.0",
    "@angular/service-worker": "^22.0.0",
    "@angular/ssr": "^22.0.0",
  },
  "devDependencies": {
    "@angular/build": "^22.0.0",
    "@angular/cli": "^22.0.0",
    "@angular/compiler-cli": "^22.0.0",
    "angular-eslint": "^21.3.0",
  }
}

[Jbz797]

For anyone else hitting this: @angular/fire@^21.0.0-rc.0 does work with Angular 22, but only if you don't use @angular/fire/analytics. The analytics module still imports ComponentFactoryResolver from @angular/core, which was removed in v22:

TS2305: Module '"@angular/core"' has no exported member 'ComponentFactoryResolver'.
node_modules/@angular/fire/analytics/index.d.ts:6:38

Workaround: drop provideAnalytics(() => getAnalytics()) and the corresponding import from your bootstrap. After that, Angular 22 build + runtime works fine for us with auth, firestore, functions, storage, auth-guard and app modules.

Hope it helps until the analytics module is fixed.

[markgoho]

#3699 (comment)

[quedicesebas]

Alternative to @angular/fire for Angular 22+ and Native Firebase JS SDK 12+

Like many of you, our team faced significant roadblocks when upgrading our production projects to Angular 22+ and the latest Firebase JS SDK v12+ due to the current maintenance status and delayed updates of @angular/fire.

Instead of waiting, we decided to build and publish a lightweight, zoneless-friendly, and modern alternative: ngx-firebase.

We have just released version 22.0.1 and integrated it into our own production monorepo, and we wanted to share it with the community to help others get unstuck.

⚡ What is ngx-firebase?
It is a drop-in, lightweight DI wrapper around the official Firebase JS SDK (v12+) built specifically for Angular 22+.

🌟 Key Features:
Fully Compatible: Built from the ground up for Angular 22+ and the latest Firebase JS SDK v12+.
Zoneless-Friendly: Works seamlessly in modern Angular applications running without Zone.js.
Zero API Bloat / Developer Autonomy: It does not try to reinvent or hide the native Firebase API. You import native Firebase methods directly (getFirestore, signInWithEmailAndPassword, etc.) and use ngx-firebase strictly for Angular Dependency Injection and reactive RxJS helper wrappers (docData, collectionSnapshots, user, etc.).
Future-Proof: If Firebase releases a new SDK update tomorrow, you don't have to wait for a library update; you can immediately use any new native Firebase features alongside our DI wrappers.
📦 Quick Start:
bash
npm install ngx-firebase firebase
🔗 Links & Resources:
GitHub Repository: quedicesebas/ngx-firebase
NPM Package: ngx-firebase
We are actively maintaining this project and would love to hear your feedback, issues, or pull requests to make it even better. Let's keep moving the Angular + Firebase ecosystem forward! 🚀

[armando-ota]

Alternative to @angular/fire for Angular 22+ and Native Firebase JS SDK 12+

Like many of you, our team faced significant roadblocks when upgrading our production projects to Angular 22+ and the latest Firebase JS SDK v12+ due to the current maintenance status and delayed updates of @angular/fire.

Instead of waiting, we decided to build and publish a lightweight, zoneless-friendly, and modern alternative: ngx-firebase.

We have just released version 22.0.1 and integrated it into our own production monorepo, and we wanted to share it with the community to help others get unstuck.

⚡ What is ngx-firebase? It is a drop-in, lightweight DI wrapper around the official Firebase JS SDK (v12+) built specifically for Angular 22+.

🌟 Key Features: Fully Compatible: Built from the ground up for Angular 22+ and the latest Firebase JS SDK v12+. Zoneless-Friendly: Works seamlessly in modern Angular applications running without Zone.js. Zero API Bloat / Developer Autonomy: It does not try to reinvent or hide the native Firebase API. You import native Firebase methods directly (getFirestore, signInWithEmailAndPassword, etc.) and use ngx-firebase strictly for Angular Dependency Injection and reactive RxJS helper wrappers (docData, collectionSnapshots, user, etc.). Future-Proof: If Firebase releases a new SDK update tomorrow, you don't have to wait for a library update; you can immediately use any new native Firebase features alongside our DI wrappers. 📦 Quick Start: bash npm install ngx-firebase firebase 🔗 Links & Resources: GitHub Repository: quedicesebas/ngx-firebase NPM Package: ngx-firebase We are actively maintaining this project and would love to hear your feedback, issues, or pull requests to make it even better. Let's keep moving the Angular + Firebase ecosystem forward! 🚀

KUDOS ...
will try .. hopefully all goes well in the future so I don't have to change everything every month ...

[EthanSK]

Please oh please oh please would you just upgrade it to fix it?

[EthanSK]

Following up on the AngularFire status update that v21 would be brought current first and v22 would follow: is there now a v21/v22 branch, PR, or canary that Angular 22 applications can help test?

AIMVS already completed an isolated Angular 22 migration successfully across its automated lint, test, and production-build checks. The remaining AngularFire-specific blocker is that the published @angular/fire@21.0.0-rc.0 still declares Angular 21 peers and its Analytics screen-tracking path imports ComponentFactoryResolver, which Angular 22 removed. This application actively uses provideAnalytics, ScreenTrackingService, and UserTrackingService, so dropping Analytics is not a viable workaround.

We would be happy to validate Auth, Firestore, Storage, Functions, App Check, Analytics, Performance, Remote Config, emulator wiring, and router guards against an official v22 canary/RC. A testable prerelease that replaces the ComponentFactoryResolver dependency would let us provide concrete compatibility feedback instead of relying on npm peer overrides.

[markgoho]

@EthanSK quick reminder you don't need angular fire anymore, just use the firebase js sdk directly

[EthanSK]

I opened #3741 with the complete Angular 22 release-prep change, including Angular 22 peers/tooling, the Analytics ComponentFactoryResolver replacement, compat support, and a focused screen-tracking regression test. The PR is ready for review; its main CI workflow is waiting for maintainer approval to run Actions from the fork.

[EthanSK]

@EthanSK quick reminder you don't need angular fire anymore, just use the firebase js sdk directly

Oh? will try this

[EthanSK]

@markgoho That is technically possible, but the way this is phrased makes it sound like a drop-in replacement, which is misleading for an established Angular application.

In AIMVS, removing AngularFire is not simply changing Firebase imports. AngularFire currently supplies Angular DI integration, Angular-aware RxJS scheduling and PendingTasks behavior, route guards, Analytics user and screen tracking, emulator and test providers, and integration used by the Firebase OSS Angular UI. The app also uses Firestore realtime streams, Auth, Storage, Functions, App Check, Analytics, Performance, Remote Config, and emulators. Moving to the Firebase JavaScript SDK directly means rebuilding or replacing each of those integrations and retesting every affected flow.

Your doula-cooperative PR appears to migrate a relatively small Auth-only surface, so its simplicity is not representative of an application using the broader AngularFire API.

The accurate distinction is: AngularFire is optional, and the Firebase JavaScript SDK can be used directly. That does not mean an existing AngularFire application no longer needs the integration it provides or that removing it is a quick change.