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.